iframe contentDocument在Chrome和Firefox中的行为

e5njpo68  于 2023-01-28  发布在  Go
关注(0)|答案(3)|浏览(175)

下面是我的测试.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上运行良好,但在火狐上不行。这是火狐的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>
bwntbbo3

bwntbbo31#

当你在Firefox中附加iframe时,它会开始异步加载iframe中的about:blank,然后你接触文档,所以它必须在那里同步创建一个about:blank文档,然后你修改它,然后异步加载完成并替换你修改的文档。
在修改帧之前等待帧上的加载事件激发将起作用。

vwhgwdsa

vwhgwdsa2#

试试这个:

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

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

7y4bm7vi3#

为了扩展Boris的回答,这里是龙!
虽然这将使Firefox工作,但它目前也将打破Chrome、Opera、Safari和所有移动的平台,因为它们不会抛出“onLoad”事件,因为在这些平台上,iframe在使用之前处于空闲状态。
你需要把这个作为Firefox的唯一例外。幸运的是,由于Firefox令人沮丧的功能缺乏,很容易区分它们。只要寻找一些互联网上其他的东西,而Firefox没有,反之亦然。

if(typeof InstallTrigger !== 'undefined'){  //if ie, wait sorry, firefox
    iframe.onload = function(){
        iframe.contentDocument.body.appendChild(contents);
    }
}else{
    iframe.contentDocument.body.appendChild(contents);
}
  • 火狐浏览器,全新的网络浏览器 *

相关问题