Question

我遇到了问题，并且一直在寻找答案。我有一些iframe，内部播放不同的HTML5横幅。但它们都是同时启动的，所以我需要在循环选项卡时重新加载iframe

HTML看起来像：

<div class="main" >
  <input type="radio" id="tab-1" name="show" checked/>
  <input type="radio" id="tab-2" name="show" />
  <input type="radio" id="tab-3" name="show" />
  <input type="radio" id="tab-4" name="show" />
  <input type="radio" id="tab-5" name="show" />
  <input type="radio" id="tab-6" name="show" />
  <input type="radio" id="tab-7" name="show" />
  <div class="tab">
    <label for="tab-1">320x320</label>
    <label for="tab-2">300x250</label>
    <label for="tab-3">300x600</label>
    <label for="tab-4">320x160</label>
    <label for="tab-5">160x600</label>
    <label for="tab-6">930x600</label>
   <label for="tab-7">930x180</label>
  </div>
  <div class="content">

    <div class="content-dis">
     <div>
       <a href="http://n" target="_blank" class="the-click"></a>
         <iframe id="iframe" src="https://b" width="320px" height="320px" frameborder="0" scrolling="no"></iframe>
      </a>
     </div>
   </div>
   <div class="content-dis">
     <div >
       <a href="http://n" target="_blank" class="the-click"></a>
       <iframe id="iframe" src="https://b" width="300px" height="250px" frameborder="0" scrolling="no"></iframe>
    </div>
   </div>

*编辑应该提到的是，iframe内容位于不同的域中。

Answer 1

如果你动态地将src添加到iframe，它应该在它获得后立即加载。

因此，例如，如果在单击选项卡时添加iFrame的src，则应仅在该点加载。

您可以拥有一个数组，其中键是iframe的ID，值是url值，或者您可以将url添加为html本身的元标记，然后在您的javascript中使用它用于填充iframe的src标记的代码

这是一个快速示例，向您展示基本想法：

$('#test').on('click', function (){
  $("iframe").each(function() {
    var attr;
    attr = $(this).attr('data-frame-src');
    if (typeof attr !== typeof void 0 && attr !== false) {
      $(this).attr('src', attr);
    }
  });  
});

https://codepen.io/NickHG/pen/wdQLqR?editors=1010

单击按钮时会加载帧的src。

目前，我正在向src添加所有iframe，但您可以轻松地使用frame id作为参数运行该函数，并仅添加iframe src

点击即可重新加载多个iframe

1 个答案: