Question

我的网页上加载了iframe。 30秒后，我想更改iframe的源代码以加载另一个站点。这很好用jQuery（setTimeout函数），但我的问题是性能。当我更改源时，将页面加载到iframe需要15秒。在内容加载之前，我一直都是空白屏幕。是否可以仅在页面加载后更改源？我可以在jQuery中做些什么来预加载网页吗？

Answer 1

您可以编写这样的脚本，以检测页面（在iframe中）何时完成加载：

// Insert iframe in the page
var $iframe = $('<iframe src="http://www.msn.com/"></iframe>').css({
    width: '1px',
    height: '1px'
}).attr('frameborder', '0').appendTo('body').data('loaded', 'no');

// Function to execute when the page (in the iframe) has finished to load,
// or when the timeout is over
function iframeIsReady() {
    if ($iframe.data('loaded') == 'no') {
        $iframe.data('loaded', 'yes').css({
            width: '800px',
            height: '800px'
        });
        alert('iframe is ready');
    }
}

// Detect when the page (in the iframe) has finished to load
$iframe.load(function ($iframe) {
    iframeIsReady();
});

// Add an optional timeout
setTimeout(function () {
    iframeIsReady();
}, 15000);

如果页面加载时间太长，我还添加了15秒的“超时”。

Answer 2

如果您使用ajax调用来检索内容，则可以在新内容到达时将旧内容替换为新内容，并且页面不会显示为空白。根据您正在做的事情，您可以查看jQuery .load()函数或只使用ajax调用并自行插入内容。

当然，您必须拥有适当的同源权限才能修改iframe的内部。

Answer 3

你可以在页面上的同一个地方有两个iframe，但有一个visibility: hidden，你可以预先加载内容，然后在30秒之后将它们交换掉。然后你改变以前可见的URL，开始加载新的URL - 并重复。

每30秒更改一次iframe源。

3 个答案: