Reload multiple iframes on click

Question

I got a problem, and have been searching for answers for ages. I have some iframes, with different HTML5 banners that plays inside. But they all start simultaneously, so i need the reload the iframe upon cycling through the tabs

HTML looks like:

<div class="main" >
  <input type="radio" id="tab-1" name="show" checked/>
  <input type="radio" id="tab-2" name="show" />
  <input type="radio" id="tab-3" name="show" />
  <input type="radio" id="tab-4" name="show" />
  <input type="radio" id="tab-5" name="show" />
  <input type="radio" id="tab-6" name="show" />
  <input type="radio" id="tab-7" name="show" />
  <div class="tab">
    <label for="tab-1">320x320</label>
    <label for="tab-2">300x250</label>
    <label for="tab-3">300x600</label>
    <label for="tab-4">320x160</label>
    <label for="tab-5">160x600</label>
    <label for="tab-6">930x600</label>
   <label for="tab-7">930x180</label>
  </div>
  <div class="content">

    <div class="content-dis">
     <div>
       <a href="http://n" target="_blank" class="the-click"></a>
         <iframe id="iframe" src="https://b" width="320px" height="320px" frameborder="0" scrolling="no"></iframe>
      </a>
     </div>
   </div>
   <div class="content-dis">
     <div >
       <a href="http://n" target="_blank" class="the-click"></a>
       <iframe id="iframe" src="https://b" width="300px" height="250px" frameborder="0" scrolling="no"></iframe>
    </div>
   </div>

*EDIT It should be mentioned that the iframe content is located on a different domain.

Are the url's on a different domain? – 1408786user May 19 '17 at 08:14 — 1408786user, May 19 '17 at 08:14
@user1408786 Yes, they are – T. Henriksen May 22 '17 at 06:52 — T. Henriksen, May 22 '17 at 06:52

Nick · Accepted Answer · 2017-05-22T07:14:49.147

1

If you add the src to the iframe dynamically, it should load as soon as it gets it.

So, for example, if you add the src of the iFrame when you click the tab, it should then load only at that point.

You can either have an array in wich the key is the ID of the iframe and the value is the url value, or you can add the url as a meta-tag in the html itself, and then use it in your javascript code to populate the src tag of the iframe

here's a quick example to show you the basic idea:

$('#test').on('click', function (){
  $("iframe").each(function() {
    var attr;
    attr = $(this).attr('data-frame-src');
    if (typeof attr !== typeof void 0 && attr !== false) {
      $(this).attr('src', attr);
    }
  });  
});

https://codepen.io/NickHG/pen/wdQLqR?editors=1010

The src of the frame loads on click of the button.

At the moment, I am adding to all the iframe the src, but you can easily run the function with the frame id as a parameter and add only that iframe src

edited May 22 '17 at 07:14

answered May 19 '17 at 09:21

Nick

13,493
8
51
98

Thanks! Could you give an example? – T. Henriksen May 22 '17 at 06:55
yes, check my update answer – Nick May 22 '17 at 07:14
Are you sure this works cross domain? – T. Henriksen May 22 '17 at 07:33
if the domain works in the iframe (it is allowed by the origin) it should work. All you are doing basically is taking the src and adding it later on, nothing else. If you try to put google on the frame, you can't as it is not allowed by the origin (google) but if you are using an allowed domain it will totally work. – Nick May 22 '17 at 07:34
The content of the iFrame doesn't show upon using 'data-frame-src' yet, I've tried uploading the source to the same server, and it still doesn't work – T. Henriksen May 22 '17 at 08:14
does it work without my method? do you get any error in the console? – Nick May 22 '17 at 08:30
console says "Uncaught ReferenceError: $ is not defined at webbannershowcase.html:85" – T. Henriksen May 22 '17 at 08:34
you need to include jquery to use my bit of code – Nick May 22 '17 at 08:34
I can't just – T. Henriksen May 22 '17 at 08:35
Yes you can, but jquery needs to be included anyway. You can downlod it or use a cdn – Nick May 22 '17 at 08:35
Hahaha, my mistake. Thank you very much!! It works now, you have a great day! – T. Henriksen May 22 '17 at 08:41
no problem, glad it works ;) – Nick May 22 '17 at 08:57

Reload multiple iframes on click

1 Answers1