Need javascript code to run multiple times in one page. For each div

Question

I forgot to include 'run multiple times in one page' on my last question located here: Create iframe with javascript appending to a div

I need to run the code on multiple div's within the same page. Right now the code below only runs once on the last div. For example if I have 3 div's, all 3 should have an iframe appended to it. Regular javascript. Trying not to use JQuery.

window.onload = function(){
var link = "http://www.somesite.com"
var iframe = document.createElement('iframe');
iframe.frameBorder=0;
iframe.width="300px";
iframe.height="250px";
iframe.id="randomid";
iframe.setAttribute("src", link);
document.getElementById("ad54").appendChild(iframe); //<--this id will be dynamically generated to match div's
}


<div class="ad" id="1"></div>
<div class="ad" id="2"></div>
<div class="ad" id="3"></div>

EDIT: Tested in IE9, Chrome, Safari, Firefox and opera. This code works. No JQuery or loops needed. This code will create the iframe wherever you use it.

var link = "http://www.somesite.com"
document.write(iframe);
var myIframe = parent.document.getElementById("randomid");
myIframe.height = 250;
myIframe.width = 300;
myIframe.src = link;
myIframe.style.border = "0px";
myIframe.style.padding = "0px";

possible duplicate of [What's the best way to loop through a set of elements in JavaScript?](http://stackoverflow.com/questions/157260/whats-the-best-way-to-loop-through-a-set-of-elements-in-javascript) — Diodeus - James MacFarlane, Apr 24 '12 at 18:22

score 1 · Accepted Answer · answered Apr 24 '12 at 18:22

1

window.onload = function() {
  var elements = document.getElementsByTagName('div');
  for (var i = 0; i < elements.length; i++) {
    append_iframe( elements[i] );
  }
}

function append_iframe( div ) {
    var link = "http://www.somesite.com"
    var iframe = document.createElement('iframe');
    iframe.frameBorder=0;
    iframe.width="300px";
    iframe.height="250px";
    iframe.id="randomid";
    iframe.setAttribute("src", link);
    div.appendChild(iframe);
}

answered Apr 24 '12 at 18:22

Dominic Goulet

7,983
7
28
56

Still only loads the last div with an iframe – Patriotec Apr 24 '12 at 20:03
Your code was close. I just had to fiddle with it so it would load no matter how many times I used it in a page. Thanx – Patriotec Apr 24 '12 at 21:35
Glad I helped, you can edit my answer with the working example if you wish to, that could help future users with the same problem. – Dominic Goulet Apr 24 '12 at 23:10

score 0 · Answer 2 · answered Apr 24 '12 at 18:24

Not a jQuery guy but I think this works

$("div").each(function(d) {
    var link = "http://www.somesite.com"
    var iframe = document.createElement('iframe');
    iframe.frameBorder=0;
    iframe.width="300px";
    iframe.height="250px";
    iframe.id="randomid";
    iframe.setAttribute("src", link);
    this.appendChild(iframe);
});

Need javascript code to run multiple times in one page. For each div

2 Answers2