How to load iframes with load more button using javascript

Question

I have a page which display 4 small iframes and i have one load more button. What I want is: code for load more button that when button is clicked, it will display more iframes 3 or 5. (i will add these).

I have code for a iframe like this below:

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

I followed this here but it didnot work for me.

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

Please help me. Thanks

USE AJAX remove the iframe idea from your mind. Thanks – madalinivascu Oct 18 '16 at 04:58 — madalinivascu, Oct 18 '16 at 04:58

KoalaGangsta · Answer 1 · 2016-10-18T05:22:59.973

First, give your <div> where you want to place your <iframe>-Tags in an ID so that you can select and interact with it using JS.

Then use JS to create a function which will add a new <iframe>-Tag to your wrapping 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/';
}

repzero · Accepted Answer · 2016-10-18T05:43:19.137

1

An iframe creater object I created below

initialize the iframe object

add all iframe links when initializing iframe object

add parent container you would like ALL iframeS to be inside. In my example is the body of the document

add an event listener to button which will trigger iframe method name 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>

edited Oct 18 '16 at 05:43

answered Oct 18 '16 at 05:28

repzero

8,254
2
18
40

thanks, its good. Only one thing, can we load 5 iframe one button is pressed? – Zahid Iqbal Oct 18 '16 at 05:38
1

if you want to change the number of iframes just take out 5 from ***for (i = 0; i < 5; ++i) *** and put in any number.. – repzero Oct 18 '16 at 05:45
1

Perfect. Thanks alot! – Zahid Iqbal Oct 18 '16 at 05:51
can you put all codes in a jsfiddle and save it..or send me the link to the website?.. – repzero Oct 18 '16 at 21:28
have you taken out document.body and replace it with your div object. from ***create_frame = new iframe_creator(document.body...***. for example document.getElementById('whatever_id') – repzero Oct 19 '16 at 10:29
try it and you will see..document.getElementById('whatver_name')...put id of div instead of 'whatever_name' – repzero Oct 19 '16 at 10:50
*** \ *** change value for height and width in this line – repzero Oct 19 '16 at 11:06

How to load iframes with load more button using javascript

2 Answers2