使用 React 在頁面中渲染隨機 Iframe

Question

我是 React 的新手，需要幫助。 我正在嘗試創建一個在特定時刻顯示 iframe 插槽的應用程序。

它將必須顯示廣告，因此 iframe 必須出現（例如在視頻開始之前），但它只能占據屏幕的一部分。

我該怎么做或如何檢查鏈接以顯示在插槽中？

非常感謝那些試圖幫助我的人。

這是我的代碼，但它非常粗魯。 我只有一個重新加載頁面的按鈕，以及這個頁面中的一個 iframe。 使用按鈕，我只想重新加載 iframe，並且我想為每次重新加載顯示不同的 iframe。

 import React, { Component } from "react"; import { render } from "react-dom"; class App extends Component { state = { index: 0 }; reload = () => { this.setState({ index: this.state.index + 1 }); }; render() { return ( < div > < button style = { { position: "absolute", left: 0, right: 0, top: 500 } } onClick = { this.reload } > Pubblicità < /button> < iframe style = { { position: "absolute", left: 500, right: 0, top: 10 } } key = { this.state.index } title = "AdSlot 11" src = "https://viewm.moonicorn.network/#%7B%22options%22%3A%7B%22publisherAddr%22%3A%220x21cd5b5629ce4b0d42ea1c9ccd5cbb9b2aa99d1a%22%2C%22whitelistedToken%22%3A%220x89d24A6b4CcB1B6fAA2625fE562bDD9a23260359%22%2C%22whitelistedType%22%3A%22legacy_300x250%22%2C%22randomize%22%3Atrue%2C%22targeting%22%3A%5B%7B%22tag%22%3A%22blockchain%22%2C%22score%22%3A100%7D%2C%7B%22tag%22%3A%22ott%22%2C%22score%22%3A100%7D%2C%7B%22tag%22%3A%22pubblicit%C3%A0%204%22%2C%22score%22%3A100%7D%5D%2C%22width%22%3A%22300%22%2C%22height%22%3A%22250%22%2C%22minPerImpression%22%3A%220%22%2C%22minTargetingScore%22%3A%220%22%2C%22fallbackUnit%22%3Anull%2C%22marketSlot%22%3A%22QmTLsEBXAurLvqwH6CFCWgKssG8H8yo1ZN8HAZXjPFszUq%22%7D%7D" width = "300" height = "250" scrolling = "no" / > < /div> ); } } export default App;

這是在warmachine的幫助下得到的代碼：

 import React, { Component } from "react"; import { render } from "react-dom"; import { BrowserRouter as Router, Route } from "react-router-dom"; import Home from "./components/Home"; import AdSlot1 from "./components/AdSlot1"; import AdSlot2 from "./components/AdSlot2"; import AdSlot3 from "./components/AdSlot3"; import AdSlot4 from "./components/AdSlot4"; import AdSlot5 from "./components/AdSlot5"; import AdSlot6 from "./components/AdSlot6"; import AdSlot7 from "./components/AdSlot7"; import AdSlot8 from "./components/AdSlot8"; class App extends Component { state = { index: 0, iframeSrcs: [ "/336x280/", "/300x100", "/300x250", "/160x600", "/180x150", "/234x60", "/468x60", "/250x250" ], //assuming they are stored in an array. visibility: false }; reload = () => { const iframeLength = this.state.iframeSrcs.length; if (this.state.index < iframeLength) { this.setState({ index: this.state.index + 1, visibility: true }); } else { this.setState({ index: 0, visibility: true }); //starting again } setTimeout(() => { this.setState({ visibility: false }); }, 5000); }; render() { return ( <Router> <div> <Route exact path="/" component={Home} /> <Route exact path="/336x280/" component={AdSlot1} /> <Route exact path="/300x100" component={AdSlot2} /> <Route exact path="/300x250" component={AdSlot3} /> <Route exact path="/160x600" component={AdSlot4} /> <Route exact path="/180x150" component={AdSlot5} /> <Route exact path="/234x60" component={AdSlot6} /> <Route exact path="/468x60" component={AdSlot7} /> <Route exact path="/250x250" component={AdSlot8} /> <Route path="/pubblicità" children={({ match, location }) => match && ( <div> <button style={{ position: "absolute", left: 0, right: 0, top: 500 }} onClick={this.reload} > pubblicità </button> {this.state.visibility} <iframe style={{ position: "absolute", left: 500, right: 0, top: 10 }} key={this.state.index} title="AdSlot" src={this.state.iframeSrcs[this.state.index]} height="100%" width="100%" scrolling="no" frameborder="0" /> </div> ) } /> </div> </Router> ); } } export default App;

Answer 1

    import React, { Component} from "react";
    import {render} from "react-dom";

    class App extends Component {
      state = {
        index: 0,
        iframeSrcs:["https://...","https://..","http://....",........] //assuming they are stored in an array.
        visibility:false
      };
      reload = () => {
       const iframeLength=this.state.iframeSrcs.length
      if(thi.state.index<iframeLength){
        this.setState({
          index: this.state.index + 1,
          visibility:true
        });
      }else{
       this.setState({index:0,visibility:true})//starting again
      }
       setTimeout(() => {
       this.setState({visibility:false)}
       }, 5000);//for 5 sec after that it will hide
      }
      render() {
        return ( <
          div >
          <
          button style = {
            {
              position: "absolute",
              left: 0,
              right: 0,
              top: 500
            }
          }
          onClick = {
            this.reload
          } >
          Pubblicità <
          /button>{this.state.visibility? <
          iframe style = {
            {
              position: "absolute",
              left: 500,
              right: 0,
              top: 10
            }
          }
          key = {
            this.state.index
          }
          title = "AdSlot 11"
          src = {this.state.iframeSrcs[this.state.index]}
          width = "300"
          height = "250"
          scrolling = "no" /
          >:""}
          <
          /div>
        );
      }
    }

    export default App;

它將在按鈕單擊時顯示不同的 iframe，並在到達結束時循環到第一個。修改使用 setTimeout 進行隱藏...檢查一次並讓我知道

Answer 2

   <Router>
        <div>
          <Route exact path="/" component={Home} />
          <Route exact path="/336x280/" component={AdSlot1} />
          <Route exact path="/300x100" component={AdSlot2} />
          <Route exact path="/300x250" component={AdSlot3} />
          <Route exact path="/160x600" component={AdSlot4} />
          <Route exact path="/180x150" component={AdSlot5} />
          <Route exact path="/234x60" component={AdSlot6} />
          <Route exact path="/468x60" component={AdSlot7} />
          <Route exact path="/250x250" component={AdSlot8} />
          <Route
            path="/pubblicità"
            children={({ match, location }) =>
              match && (
                <div>
                  <button
                    style={{
                      position: "absolute",
                      left: 0,
                      right: 0,
                      top: 500
                    }}
                    onClick={this.reload}
                  >
                    pubblicità
                  </button>
                  {this.state.visibility?
                  <iframe
                    style={{
                      position: "absolute",
                      left: 500,
                      right: 0,
                      top: 10
                    }}
                    key={this.state.index}
                    title="AdSlot"
                    src={this.state.iframeSrcs[this.state.index]}
                    height="100%"
                    width="100%"
                    scrolling="no"
                    frameborder="0"
                  />:""}
                </div>
              )
            }
          />
        </div>
      </Router>

你沒有應用條件!!使用這個它會起作用我添加了條件