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

Question

在你回答之前，我知道load事件。

我需要检查一下iframe是否已经装好了。对于图像，我可以轻松地使用HTMLImageElement.complete属性，但是iframe似乎没有.所以..。它还有什么其他的东西可以用吗？

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

原因:我目前正在循环遍历setInterval循环中的图像，以检查它们是否都已加载，当它们都已加载时，我将它们逐个淡出。看上去很不错。我想把假象加进去，但我想不出如何检查这些假象是否装上了.

Answer 1

如果您的所有用例都是针对youtube播放器的，那么您可以使用youtube的iframe来获取onReady事件，让您知道播放器何时准备使用。

确认iframe api已加载后，当onYoutubePlayerAPIReady()加载时，您可以调用YT.Player()创建或操作链接到youtube视频的iframe。

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

onReady属性将让api知道要使用哪个回调。

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

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

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

会变成

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

然后，您必须向iframe窗口发送一个listening和一个addEventListener postMessage。这告诉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内容的区域/事件。源代码必须实现类似于youtube上面所做的类似postMessage /消息系统的东西。

演示

​

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>

​

Answer 2

请尝试如下：

<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>