如何检查iframe是否已完成加载

问题描述：

在您回答之前，我知道load事件。如何检查iframe是否已完成加载

我需要检查一个iframe是否已经加载。有了图片，我可以很容易地使用HTMLImageElement.complete属性，但iframe似乎没有那么...所以...它有其他东西可以使用吗？

如何检查是否已完成加载？

原因：我目前通过在循环的setInterval循环影像检查，如果他们都加载，当他们有，我通过一个褪色他们于一体。看起来很不错。我想I帧添加到装饰性，但无法弄清楚如何检查是否I帧已加载...

你有没有对内容的iframe负荷控制？如果是这样，您可以从该源发送[PostMessage]（https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage）（如说domready），并在父页面上使用侦听器 –

@PatrickEvans在这种情况下，不会...这是一个通过YouTube api响应中的'embedHtml'属性获取的YouTube播放器。 – Svish

答

请尝试以下：

<iframe id="my-iframe"></iframe> 
<script> 
    var iframe_document = document.querySelector('#my-iframe').contentDocument; 

    if (iframe_document.readyState !== 'loading') onLoadingCompleted(); 
    else iframe_document.addEventListener('DOMContentLoaded', onLoadingCompleted); 

    function onLoadingCompleted(){ 
     console.log('iFrame loaded!'); 
    } 
</script>

'contentDocument'为'null'。也尝试通过'contentWindow'，但这给了我一个很好的*权限被拒绝访问跨源对象的属性“readyState”* – Svish

与addEventListener相同 – Svish

不幸的是，如果跨源是问题。我希望我有更好的答案。希望你找到一个好的解决方案。 – cypark

答

如果你所有的用例对于YouTube用户而言，你可以使用YouTube的iframe播放器api进行onReady事件，以便让玩家知道何时可以使用该播放器。

确保了iframe api加载，onYoutubePlayerAPIReady()被调用时是这样，你可以调用YT.Player()创建或链接到YouTube视频

function onPlayerReady(){ 
    //do work 
} 
player = new YT.Player('container', { 
    height: '390', 
    width: '640', 
    videoId: 'Video's Youtube Id', 
    events: { 
     'onReady': onPlayerReady 
    } 
});

的onReady属性将让API的iframe操作后知道使用哪个回调。

现在，您不必加载/使用iframe api来使这些工作。你只需要自己实现正确的postMessage调用和消息事件回调。

要做到这一点，您首先必须确保正在使用的网址有enablejsapi=1作为参数。它告诉youtube在iframe中加载必要的api库。例如：

https://www.youtube.com/embed/VgC4b9K-gYU

将成为

https://www.youtube.com/embed/VgC4b9K-gYU?enablejsapi=1

然后你必须发送一个listening和addEventListener的postMessage到iframe的窗口。这告诉api，有些东西想要听取事件以及您想要听的事件。

var frame = document.querySelector('iframe'); 

var listenEvent = {"event":"listening","id":1,"channel":"test"}; 
frame.contentWindow.postMessage(JSON.stringify(listenEvent),'*'); 

var listenerEvent = { 
    "event":"command", 
    "func":"addEventListener", 
    "args":["onReady"], 
    "id":1, 
    "channel":"test" 
}; 
frame.contentWindow.postMessage(JSON.stringify(listenerEvent),'*');

然后你只需要添加一个message事件处理程序来处理任何传入的消息。

window.addEventListener('message',function(data,origin){ 
    data = JSON.parse(data); 
    if(data.event == 'onReady'){ 
     //do work 
    } 
});

现在，如果你所有的案件不涉及YouTube的球员，那么你可能是出于运气，跨原产地规则，不要让你访问的iframe内容的DOM /事件。源代码必须实现类似于上面的youtube那样的postMessage/message系统。

演示

window.addEventListener('message', function(event, origin) { 
 
    var data = JSON.parse(event.data); 
 
    if (data.event == 'onReady') { 
 
    onReady(); 
 
    } 
 
}); 
 

 

 
function onReady() { 
 
    console.log("Player ready"); 
 
} 
 

 
var frame = null; 
 
window.addEventListener('load', function() { 
 
    frame = document.querySelector('iframe'); 
 
    var command = { 
 
    "event": "listening", 
 
    "id": 1, 
 
    "channel": "test" 
 
    }; 
 

 
    frame.contentWindow.postMessage(JSON.stringify(command), '*'); 
 

 
    command = { 
 
    "event": "command", 
 
    "func": "addEventListener", 
 
    "args": ["onReady"], 
 
    "id": 1, 
 
    "channel": "test" 
 
    }; 
 
    frame.contentWindow.postMessage(JSON.stringify(command), '*'); 
 
});

<iframe src="https://www.youtube.com/embed/VgC4b9K-gYU?enablejsapi=1"></iframe>

如何检查iframe是否已完成加载

相关推荐