Firefox沒有觸發動態嵌套iframe的onload

我有以下代碼適用於Chrome和MS Edge，但不適用於Firefox。Firefox沒有觸發動態嵌套iframe的onload

Parent.html有這個腳本。

<html> 
<body> 
<script> 
var ifr1 = document.createElement('iframe'); 

ifr1.onload = function() { 
    alert("iframe 1 loaded") //fires on all browsers 
    script = ifr1.contentWindow.document.createElement('script'); 
    script.src = 'PATH/TO/script.js'; 
    script.onload = function() { 
     alert("script 1 onload") //fires on all browsers 
    }; 
    ifr1.contentWindow.document.body.appendChild(script); 
}; 
document.body.appendChild(ifr1); 

</script> 
</body> 
</html>

它創建一個iframe並在該iframe中加載script.js。

這裏的script.js它做同樣的事情像上面 -

var ifr2 = document.createElement('iframe'); 

ifr2.onload = function() { 
    alert("iframe 2 loaded") //doesn't fire on Firefox 
    script = ifr2.contentWindow.document.createElement('script'); 
    script.src = 'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js'; 
    script.onload = function() { 
     alert("script 2 onload") 
    }; 
    ifr2.contentWindow.document.body.appendChild(script); 
}; 
document.body.appendChild(ifr2);

它創建由Parent.html創建的iframe ifr1內另一IFRAME ifr2。

現在，Chrome和Edge會正常顯示所有警報，但Firefox不會觸發在ifr1（即使IE觸發ifr2的onload）中加載的ifr2的onload事件。任何想法爲什麼？

來源

2015-11-04 dev_musings

devtools控制檯上的任何消息？ –

沒有螢火蟲。 –

一種解決方法是創建一個簡單的HTML頁面 - 甚至只是<html><head></head><body></body></html>（甚至更少）..讓叫它empty.html

如果現在改變Parent.html到

<html> 
<body> 
<script> 
var ifr1 = document.createElement('iframe'); 

ifr1.onload = function() { 
    alert("iframe 1 loaded") //fires on all browsers 
    script = ifr1.contentWindow.document.createElement('script'); 
    script.src = 'PATH/TO/script.js'; 
    script.onload = function() { 
     alert("script 1 onload") //fires on all browsers 
    }; 
    ifr1.contentWindow.document.body.appendChild(script); 
}; 
ifr1.src = 'empty.html'; // add this code ******* 
document.body.appendChild(ifr1); 

</script> 
</body> 
</html>

然後，它的工作原理如預期的那樣

不知道爲什麼firefox會做它的功能 - 這可能是因爲沒有src屬性，iframe的位置是about:blank - 但爲什麼第一個作品而不是第二個是我的謎

編輯：好吧，它做了一次，然後再次停止！

OK，真是奇怪 - 如果添加ifr1.src = 'empty.html'它的工作......如果你複製在script.js再次打破

不知道我已經回答了你很好，但至少我已經給你一個工作kludge：p

來源

2015-11-04 23:29:35

IMO這是Firefox中的錯誤，因爲Firefox不會按照您期望的方式在iframe中執行load事件。 Mozilla開發者可能會不同意。這一切都歸結於你對「負載」意味着什麼的定義，而且比你想象的更復雜。

在任何情況下，真正的問題是什麼時候知道可以安全地訪問ifr2.contentWindow，並且使用ifr2.onload的全部使用方法是讓您可以計算出ifr2.contentWindow何時存在。

但是請注意，當document.body.appendChild(ifr2)執行，所以，如果你移動appendChild()調用上面你當前的代碼並刪除onload功能contentWindow和文件被立即創建，它將按預期工作。

或者你可以改變onload功能，其他的東西和appendChild()後直接執行它，因爲這樣的：

var ifr2 = document.createElement('iframe'); 
function loadit() { 
    console.log("iframe 2 loaded") 
    script = ifr2.contentWindow.document.createElement('script'); 
    script.src = '...'; 
    script.onload = function() { 
     console.log("script 2 onload") 
    }; 
    ifr2.contentWindow.document.body.appendChild(script); 
}; 

// add the iframe to the document 
document.body.appendChild(ifr2); 

// now execute your script stuff: 
loadit()

這應該在所有（現代）的瀏覽器。

來源

2015-11-05 00:13:55 cegfault

Firefox沒有觸發動態嵌套iframe的onload

回答

相關問題