如何將內容動態加載到iframe中-有解無憂

我有一些應該動態加載 iframe 的代碼。問題是我有一個函式應該讓它級聯到附加到 iframe 的下一個 id。我需要有人幫助查明我的代碼問題。

const $iframe = $("#content-frame");
$($iframe).attr('src', cath);

var cath = 'https://exanple.com'   myIds[i]   '/embed/dynamic?';
console.log(cath);
const myIds = ['1_aq4jiqb', '1_4u0ocu4u'];

function switchId() {
  for (let i = 0; i < myIds.length; i  ) {
    cath = 'https://www.exanple.com'   myIds[i]   '/embed/dynamic?';

  }
}
setInterval(function() {
  switchId()
}, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<iframe id="content-frame" src="" width="400px" height="400px"></iframe>

uj5u.com熱心網友回復：

這會一遍又一遍地覆寫 cathcath = 'https://www.exanple.com' myIds[i] '/embed/dynamic?';并且您不會在任何地方使用 cath 。

除了使用 setInterval 獲得的回圈之外，您不想要任何其他回圈

也不需要將 jQuery 物件轉換為 jQuery 物件。

我把清單包起來

const $iframe = $("#content-frame");
const myIds = ['1_aq4jiqb', '1_4u0ocu4u'];
let cnt = 0;
$iframe.on("load",function() { console.log($(this).attr("src"))})

setInterval(() => {
  const url = 'https://www.example.com/'   myIds[cnt]   '/embed/dynamic?';
  $iframe.attr('src', url);
  cnt  ;
  if (cnt >= myIds.length) cnt = 0; // wrap the list
}, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<iframe id="content-frame" src="" width="400px" height="400px"></iframe>

沒有 jQuery 的相同代碼

const iframe = document.getElementById("content-frame");
const myIds = ['1_aq4jiqb', '1_4u0ocu4u'];
let cnt = 0;
iframe.addEventListener("load",e => console.log(e.target.src))

setInterval(() => {
  const url = 'https://www.example.com/'   myIds[cnt]   '/embed/dynamic?';
  iframe.src = url;
  cnt  ;
  if (cnt >= myIds.length) cnt = 0; // wrap the list
}, 3000);

<iframe id="content-frame" src="" width="400px" height="400px"></iframe>

uj5u.com熱心網友回復：

僅更改 iframe 元素SRC即可解決問題。

    const myIds = ['1_aq4jiqb', '1_4u0ocu4u'];
    let cnt = 0;
    setInterval(function() {
       const src = 'https://www.example.com/'   myIds[cnt]   '/embed/dynamic?';
       document.getElementById('myIframe').src = src;
       cnt  ;
       if (cnt >= myIds.length) cnt = 0; 
    }, 3000);

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/384955.html

標籤：javascript

上一篇：使用JavaScript從檔案加載svg

下一篇：在Tkinter畫布上用滑鼠繪圖