Question

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

我需要检查iframe是否已加载。对于图像，我可以使用HTMLImageElement.complete属性轻松完成，但iframe似乎没有...所以......它还有其他可以使用的东西吗？

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

原因： 我正在循环浏览setInterval循环中的图像以检查它们是否都已加载，当它们有时，我将它们淡入逐一。看起来很不错。而且我想将iframe添加到那种幻想中，但无法弄清楚如何检查iframe是否已加载......

Answer 1

请尝试以下：

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

Answer 2

如果您的所有用例都适用于youtube播放器，那么您可以使用youtube的iframe播放器api进行实时活动，让您知道该播放器何时可以使用。

确保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 API来使这些工作正常。您只需自己实现正确的postMessage调用和消息事件回调。

要执行此操作，首先必须确保正在使用的网址具有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内容的dom /事件。源代码必须实现类似于postMessage / message系统的内容，就像上面的youtube一样。

演示

＆＃13;

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), '*');
});

＆＃13;

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

＆＃13;

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

2 个答案: