3

嗨，我正在尝试在一个页面上加载 10 个 iframe，但我希望它们一个接一个地加载...

例如：第一次加载第一次，当它完成第二次加载时应该开始加载......等等

我在尝试这个

$i = 1;
while($i < 10){
    echo '<iframe src="/get_data.php?id='.$id.'&i='.$i.'"></iframe>';
    $i++;
    }

这里有一个问题，所有这些都加载在一起......有没有办法我可以做到这一点javascript or php

4

3 回答 3

3

PHP 不会延迟输出到浏览器。它将一次将所有 10 个 iframe 放置在页面上，并且它们将同时加载。PHP 是服务器端，这意味着它无法对浏览器从外部源接收到的事件做出反应。PHP 只是为了提供页面，然后调用它退出，直到它收到另一个请求。

对于您正在尝试做的事情，Javascript 将是关键。在页面加载时创建一个函数以添加 iframe，创建一个侦听器以等待 iframe 完全加载。当它收到响应时，创建下一个 iframe。那是一个大纲。查看：当 iframe 在 jQuery 中完成加载时，如何触发事件？（第二个答案）查看如何监听 iframe 加载。

于 2013-06-03T17:43:36.627 回答
2

我相信你应该使用 JavaScript 和 iframe 的 onLoad 事件。 http://www.w3schools.com/jsref/event_frame_onload.asp

只需对其进行编码，以便一旦加载 iframe，它就会开始加载下一个。

于 2013-06-03T17:43:14.310 回答
2

基于此响应动态创建 iframe 并将 onload 事件附加到它

哟可以做这样的事情：

  var urls_to_load = ["http://url.com","http://url2.com","http://url3.com","http://url4.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(); //Start process
于 2013-06-03T17:57:10.137 回答