javascript - 如何加载两个 iframe，第一个 iframe 已经加载后一个？

Question

我有两个使用 ajax 调用的不同链接，不幸的是每次加载只能有一个请求。这将导致两个 iframe 显示相同的数据。我想知道如何通过这个？也许加载一个 iframe，并在其完成后加载下一个 iframe。我使用的代码在 chrome 上工作完全正常! <3 但由于某种原因它在 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>

对于 html 来说，它非常简单；

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

或者可以用 jquery 来做到这一点吗？

Answer 1

听起来你应该等待 load事件首日<iframe>在设置 src 之前在第二个<iframe> .

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

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

或者，既然您询问了 jQuery:

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

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