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

首先，将<div>放在您要将<iframe> - 标记放在ID中的位置，以便您可以使用JS选择并与之交互。

然后使用JS创建一个函数，该函数将新的<iframe> - 标记添加到包装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/';
}

Answer 2

我在下面创建的iframe创作者对象

初始化iframe对象

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

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

向按钮添加一个事件监听器，该按钮将触发iframe方法名称

 Class A{
  private String field1;
  private List<B> list = new ArrayList<B>();
 }

Class B{
 private transient field2;
}

＆＃13;

add_iframe()

＆＃13;

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()
})

＆＃13;

iframe {
  border: solid black;
}

＆＃13;

如何使用javascript加载iframes加载更多按钮

2 个答案: