Question

这是我的testing.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的bug吗？有没有解决方法？

找到解决方法：看起来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>

chrome和firefox中iframe contentDocument的行为

2 个答案: