Kri*_*vas 2 html javascript iframe firefox google-chrome
这是我的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>
Run Code Online (Sandbox Code Playgroud)
这里 ifr.contentDocument.body.style.cssText = (...) 在 chrome 上工作正常,但在 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>
Run Code Online (Sandbox Code Playgroud)
当您在 Firefox 中附加 iframe 时,它开始about:blank在 iframe 中异步加载。然后你触摸文档,所以它必须about:blank在那里同步创建一个文档,然后你修改它。然后异步加载完成并替换您修改的文档。
在修改它之前等待框架上的加载事件触发。