javascript - 如何检查iframe是否加载完成

Question

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

我需要检查 iframe 是否已加载。通过图像，我可以使用HTMLImageElement.complete轻松做到这一点属性，但 iframe 似乎没有这个...那么...它还有其他可以使用的东西吗？

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

<小时/>

原因:我当前正在 setInterval 循环中循环遍历图像，以检查它们是否全部已加载，当它们加载时，我将它们淡入逐个。看起来很不错。我想将 iframe 添加到这种幻想中，但不知道如何检查 iframe 是否已加载... 😕

Answer 1

如果您的所有用例都适用于 YouTube 播放器，那么您可以使用 YouTube 的 iframe 播放器 api 来获取 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 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/消息系统的东西，就像 youtube 上面所做的那样。

演示

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>