Question

我有多个网页，我希望在一页上以iframe的比例加载1个页面。因此，它将首先在iframe中加载1个网页，并且只有在该页面完成加载后，它才会在下一个网页中创建一个新的iframe，然后再次等待该网页加载，然后再创建一个新的iframe，依此类推...

首先，我尝试了以下方法：

$(document).on('load', '#iframe1', function () {
  $('body').append('<iframe src="https://page2.com" id="iframe2"></iframe>');
}

);
$(document).on('load', '#iframe2', function () {
  $('body').append('<iframe src="https://page3.com" id="iframe3"></iframe>');
}

);

<iframe src="https://page1.com" id="iframe1"></iframe>

但是它不起作用，它将同时全部加载它们，并且如果我使用$('#iframe2').load而不是$(document).on('load', '#iframe2')，那么它将无法工作，因为iframe是动态创建的。 / p>

然后我在StackOverflow上找到了以下代码，但它不会等待其他iframe加载之后再加载下一个Web页面：

var urls_to_load = ["https://page1.com", "https://page2.com",
                "page3.com"];

            var i = 0;
            function loadIframeAndcheckIfReady() {
                var current_url = urls_to_load[i];
                alert(i);
                frame = document.createElement('iframe');
                document.body.appendChild(frame);
                frame.setAttribute('src', current_url);
                var inter = window.setInterval(function () {
                    if (frame.contentWindow.document.readyState === "complete") {
                        window.clearInterval(inter);
                        i++; //Now we have one url more...
                        if (i < urls_to_load.length)
                            loadIframeAndcheckIfReady(); //recursively call the function until i it's iqual to urls_to_load.length
                    }
                }, 100);
            }
            loadIframeAndcheckIfReady();

我也尝试过这样的事情：

$(document).ready(function() {
  function loadIframe(iframeName, url) {
    var $iframe = $('#' + iframeName);
    if ($iframe.length) {
      $iframe.attr('src', url);
      return false;
    }
    return true;
  }

  $('#iframe1').ready(function() {
    loadIframe('iframe2', 'https://page2.com');
    $('#iframe2').ready(function() {
      loadIframe('iframe3', 'https://page3.com');
    });
  });
});

<iframe src="https://page1.com" id="iframe1"></iframe>
<iframe src="" id="iframe2"></iframe>
<iframe src="" id="iframe3"></iframe>

但这也无需等待即可加载所有内容。

有什么建议吗？

Answer 1

感谢#Shilly，我了解到我应该使用.load（）而不是.ready（）

  $('#iframe1').load(function() {
    loadIframe('iframe2', 'https://page2.com');
    $('#iframe2').load(function() {
      loadIframe('iframe3', 'https://page3.com');
    });
  });

一对一创建和加载iframe

1 个答案: