Question

我有五个HTML页面和一个iFrame。

我需要在iFrame中显示HTML个页面，每个页面都有特定的显示时间。延迟应包括加载iFrame容器的时间。说第一页的显示时间为10秒，第二页的显示时间为20秒，第三页的显示时间为30秒，依此类推。

如何显示绑定到显示时间的所有页面？

我已经尝试了很多方法来添加加载时间，包括iframe.load在代码中，但它会导致一些奇怪的递归，这会改变显示时间。

Answer 1

我建议只在页面初始化的iframe.load完成后加载第一个源。代码使用jQuery。

日志当然是为了确保时间完全符合您的预期，只有最小的偏移（当我测试它时会有一位数毫秒。）

<iframe id="myiframe"></iframe>

<script>
var currentFrameId = 0;
    var frameLengths = [0,10000,20000,30000,40000];//The first page should be displayed as soon as ready
    var frameURLs = ["http://example.com/page1", "http://example.com/page2", "http://example.com/page3", "http://example.com/page4", "http://example.com/page5"];

    function nextFrame(){
        if(currentFrameId == frameURLs.length)
            return;
        console.log((new Date().getTime()) + ": setting iframe src to " + frameURLs[currentFrameId] + "(frame id " + currentFrameId + ")");
        $('#myiframe').attr('src',frameURLs[currentFrameId]);
        currentFrameId++;
    }

    $(function(){
        console.log((new Date().getTime()) + ": starting javascript");

        $('#myiframe').load(function(){
            console.log((new Date().getTime()) + ": iframe loaded for frame id " + currentFrameId);
            window.setTimeout(nextFrame, frameLengths[currentFrameId]); 
        });

        nextFrame();
    });
</script>

请参阅https://jsfiddle.net/kx2vdj16/

下的工作示例

在同一iFrame中具有不同显示时间的多个HTML页面

1 个答案: