如何使用javascript加载带有加载更多按钮的iframe答案

【问题标题】：How to load iframes with load more button using javascript如何使用javascript加载带有加载更多按钮的iframe
【发布时间】：2016-10-18 04:50:22
【问题描述】：

我有一个显示 4 个小 iframe 的页面，并且我有一个加载更多按钮。我想要的是：加载更多按钮的代码，当单击按钮时，它将显示更多 iframe 3 或 5。（我将添加这些）。

我有如下 iframe 的代码：

<div style="margin:0px; padding:0px;">
  <iframe style="width: 100%; overflow:hidden; margin-top:-0px;" width="400" height="378" src="" allowtransparency="true" frameborder="0"></iframe>
</div>

<button class="btn">Load More</button>

我在这里关注了这个，但它对我不起作用。

jQuery load first 3 elements, click "load more" to display next 5 elements

请帮助我。谢谢

【问题讨论】：

使用 AJAX 从您的脑海中消除 iframe 的想法。谢谢

标签： javascript jquery html iframe

【解决方案1】：

我在下面创建的一个 iframe 创建器对象

初始化 iframe 对象

初始化 iframe 对象时添加所有 iframe 链接

添加您希望所有 iframe 都在其中的父容器。在我的示例中是文档的正文

为按钮添加一个事件监听器，它将触发 iframe 方法名称add_iframe()

counter = 0

function iframe_creator(parent, src_array) {
  this.src_array = src_array;
  this.parent = parent;
  this.template = '\
  <iframe style="width: 100%; overflow:hidden; margin-top:-0px;" width="400" height="378" src="" allowtransparency="true" frameborder="0"></iframe>\
';
  this.add_iframe = function() {
    for (i = 0; i < 5; ++i) {
      if (counter < this.src_array.length) {

        var div = document.createElement('div');
        div.innerHTML = this.template;
        div.getElementsByTagName('iframe')[0].src = this.src_array[counter];
        div.style = "margin:0px; padding:0px;"
        this.parent.appendChild(div);
        ++counter;
      } //end if

    }

  }

}
create_frame = new iframe_creator(document.body, ['https://en.wikipedia.org/wiki/Nature', 'https://en.wikipedia.org/wiki/Nature','https://en.wikipedia.org/wiki/Nature','https://en.wikipedia.org/wiki/Nature','https://en.wikipedia.org/wiki/Nature']);
document.getElementById('button').addEventListener('click', function() {
  create_frame.add_iframe()
})

iframe {
  border: solid black;
}

<button id="button">
  press
</button>

【讨论】：

谢谢，很好。只有一件事，我们可以加载 5 个 iframe 一个按钮被按下吗？
如果你想改变 iframe 的数量，只需从 ***for (i = 0; i
完美。非常感谢！
你能把所有的代码放在一个 jsfiddle 中保存吗..或者把网站的链接发给我？..
您是否取出了 document.body 并将其替换为您的 div 对象。来自 create_frame = new iframe_creator(document.body...。例如 document.getElementById('whatever_id')

【解决方案2】：

首先，给你的<div> 提供你想在ID 中放置<iframe>-Tag 的位置，以便你可以使用JS 选择它并与之交互。

然后使用 JS 创建一个函数，它将一个新的<iframe>-Tag 添加到您的包装 div 中。

http://codepen.io/anon/pen/EgdKQp

HTML：

<div id="wrapper"></div>
<button onclick="loadMore()">Load More</button>

JS：

function loadMore() {
    var wrapper = document.getElementById('wrapper'); // Get wrapper
  var iframe = document.createElement('iframe'); // Create new iframe
  wrapper.appendChild(iframe); // Set iframe as child of wrapper

  // Set the initial url like this:
  iframe.contentWindow.document.location.href = 'http://codepen.io/';
}

【讨论】：