CODEWITHSUNDEEP
javascriptjqueryhtmlajaxiframe
misterzik
misterzik

Reputation: 1860

How can I load two iframes, One after the first one already has load?

I've two different links that use ajax calls, and unfortunately there can be only one request per load. Which will result in both iframes showing the same data. I would like to know how to get pass this? Perhaps make one iframe load and after it has finish make the next one load. The code im using works completlety fine on chrome! <3 but for some reason its broken for firefox :'(

<script>
 function setIframeSrc2() {
  var inLink = "http://localhost";
  var graphic = document.getElementById('graphic');
  if ( -1 == navigator.userAgent.indexOf("MSIE") ) {
   graphic.src = inLink;
   } else if ( -1 == navigator.userAgent.indexOf("FireFox") ) {
   graphic.src = inLink;
   }
   else {
   graphic.location = inLink;
  }
 }
 setTimeout(setIframeSrc2, 0);

 iframe.contentWindow.location.reload(true);
 </script>


<script>
 function setIframeSrc() {
  var inLink2 = "http://localhost?loading";
  var graphic2 = document.getElementById('graphic2');
  if ( -1 == navigator.userAgent.indexOf("MSIE") ) {
   graphic2.src = inLink2;
  } else if ( -1 == navigator.userAgent.indexOf("FireFox") ) {
   graphic2.src = inLink2;
  }
   else {
    graphic2.location = inLink2;
   }
  }
 setTimeout(setIframeSrc, 7999);
</script>

and for the html, its pretty simple;

  <iframe frameborder="0" scrolling="no" width="100%" height="600" name="graphic" id="graphic">
       <p>iframes are not supported by your browser.</p>
    </iframe>

    <br />

    <iframe frameborder="0" scrolling="no" width="100%" height="600" name="graphic2" id="graphic2">
       <p>iframes are not supported by your browser.</p>
    </iframe>

or is it possible to do this with jquery?

Upvotes: 0

Views: 1837

Answers (1)

Noah Freitas
Noah Freitas

Reputation: 17430

It sounds like you should wait for the load event on the first <iframe> before setting the src on the second <iframe>.

var frame1 = document.getElementById('graphic');
frame1.src = 'http://localhost';
frame1.addEventListener('load', loadFrame2);

function loadFrame2() {
    document.getElementById('graphic2').src = 'http://localhost?loading';
}

Or, since you asked about jQuery:

$('#graphic')
    .attr('src', 'http://localhost')
    .on('load', loadFrame2);

function loadFrame2() {
    $('#graphic2').attr('src', 'http://localhost?loading');
}

Upvotes: 1

Related Questions