Question

我正在尝试逐个加载一组页面，并在当前请求完成后加载下一页

现在在我的示例页面中，我只有一个iframe，

<iframe onload="loadNext()"></iframe>

我使用以下脚本来完成这项工作，

    var i = 0;

    function loadNext()
    {
        var urls = [
        'http://localhost/a.htm',
        'http://localhost/b.htm',
        'http://localhost/c.htm',
        ];

        if (i > urls.length - 1)
        {
            console.log ("Done!");
            return;
        }

        document.querySelector('iframe').src = urls[i ++];
    }

但是onload事件触发得太快了，我希望看到3页按顺序加载，但它不是（来自Chrome浏览器的Network标签页），我甚至没有看到访问日志在nginx。

为什么它不起作用的任何想法？

Answer 1

您的代码应该有效。我已对此进行了测试，并在每次加载帧之前添加了timeout，以便您可以看到更改。

var URLs = [
    'http://localhost/a.htm',
    'http://localhost/b.htm',
    'http://localhost/c.htm',
    'http://localhost/d.htm'
];

function loadNext(){

    var frameWindow = document.getElementById('test').contentWindow;

    if(URLs.length > 0){
        setTimeout(function(){
            frameWindow.location.replace(URLs.shift());
        }, 1000);
    }
}

<iframe id="test" onload="loadNext();"></iframe>

可能是因为你是从localhost加载的，加载时间是如此之小以至于你没有注意到它？

在iframe中逐个加载一组页面

1 个答案: