javascript - 如何使用 javascript 通过加载更多按钮加载 iframe

Question

我有一个页面显示 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

请帮助我。谢谢

Answer 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>