如何檢查iframe是否已完成加載

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

我需要檢查一個iframe是否已經加載。有了圖片，我可以很容易地使用HTMLImageElement.complete屬性，但iframe似乎沒有那麼...所以...它有其他東西可以使用嗎？

如何檢查是否已完成加載？

原因：我目前通過在循環的setInterval循環影像檢查，如果他們都加載，當他們有，我通過一個褪色他們於一體。看起來很不錯。我想I幀添加到裝飾性，但無法弄清楚如何檢查是否I幀已加載...

2017-08-03 Svish

你有沒有對內容的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>

來源

2017-08-03 05:29:30 cypark

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

來源

2017-08-03 07:21:56

如何檢查iframe是否已完成加載

回答

相關問題