chrome 中 iframe contentDocument 和 firefox 的行為

Question

這是我的測試.html：

<html>
<meta charset="utf-8">
<script>
window.onload = function() {
    var a = document.getElementById("divid");
    var ifr = document.createElement('iframe');
    a.appendChild(ifr);
    ifr.contentDocument.body.style.cssText = (
      'margin: 0px;' +
      'padding: 0px;' +
      'height: 100%;' +
      'width: 100%;');
}
</script>

<head></head>
<body>
<div id="divid"/>
</body>
</html>

這里 ifr.contentDocument.body.style.cssText = (...) 在 chrome 上工作正常但在 Firefox 上不行。它是 firefox 錯誤嗎？ 有什么解決方法嗎？

找到解決方法：firefox 中似乎存在一個奇怪的競爭錯誤。以下使用 setTimeout 的解決方法將使這項工作正常進行，如下所示：

<html>
<meta charset="utf-8">
<script>
window.onload = function() {
    var a = document.getElementById("divid");
    var ifr = document.createElement('iframe');
    ifr.id = "fid";
    a.appendChild(ifr);
    setTimeout (function() {
        ifr.contentDocument.body.style.cssText = (
        'margin: 0px;' +
        'padding: 0px;' +
        'height: 100%;' +
        'width: 100%;');
    }, 100);
}
</script>

<head></head>
<body>
<div id="divid"/>
</body>
</html>

Answer 1

當您在Firefox中附加iframe時，它會開始在iframe中異步加載about:blank ，異步。 然后你觸摸文檔，所以它必須在那里同步創建一個about:blank文檔，然后你修改它。 然后異步加載完成並替換您修改的文檔。

在修改框架之前等待框架上的加載事件會起作用。

Answer 2

嘗試這個：

 ifr.contentDocument.getElementsByTagName('body')[0].style.cssText = (
  'margin: 0px;' +
  'padding: 0px;' +
  'height: 100%;' +
  'width: 100%;');

也

<div id="divid"> </div>

Answer 3

為了擴展鮑里斯的回答，這是龍！

雖然這將使 Firefox 正常工作，但它目前也會破壞 Chrome、Opera、Safari 及其所有移動對應設備，因為它們不會像在這些平台上那樣拋出 'onLoad' 事件，iframe 會閑置直到使用。

您需要將其設為 Firefox 唯一例外。 幸運的是，由於 Firefox 令人沮喪的功能匱乏，因此很容易將它們區分開來。 只需查找 inte.net 的 rest 有但 Firefox 沒有的東西，反之亦然。

if(typeof InstallTrigger !== 'undefined'){  //if ie, wait sorry, firefox
    iframe.onload = function(){
        iframe.contentDocument.body.appendChild(contents);
    }
}else{
    iframe.contentDocument.body.appendChild(contents);
}

Firefox，新的 Inte.net Explorer

chrome 中 iframe contentDocument 和 firefox 的行為

問題描述

3 個解決方案

解決方案1
4 已采納 2013-05-05 11:59:23

解決方案2
0 2013-05-05 05:34:31

解決方案3
0 2023-01-26 21:56:22

chrome 中 iframe contentDocument 和 firefox 的行為

問題描述

3 個解決方案

解決方案1 4 已采納 2013-05-05 11:59:23

解決方案2 0 2013-05-05 05:34:31

解決方案3 0 2023-01-26 21:56:22

解決方案1
4 已采納 2013-05-05 11:59:23

解決方案2
0 2013-05-05 05:34:31

解決方案3
0 2023-01-26 21:56:22