Firefox下，已经load的document，重新open再write一个iframe，则这个iframe的onload不会执行。
重现步骤
- 在页面中放置一个iframe，并注册一个onload处理函数。
- 在该处理函数中，打开iframe的文档流。
- 向文档流使用
document.write写入一个iframe，这个iframe包含一个onload属性。
- 查看onload的处理函数是否执行。
期望结果
iframe的onload处理函数正确执行。
实际结果
第二层iframe的onload函数没有执行。
影响范围
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我去你喵的</title>
</head>
<body>
<script>
var loaded = false;
function load(iframe) {
if (!loaded) {
loaded = true;
var doc = iframe.contentWindow.document;
doc.open();
doc.write('<iframe src="about:blank" onload="alert(\'!!\');"><\/iframe>');
doc.write('</body>');
doc.close();
}
}
</script>
<iframe src="about:blank" onload="load(this);"></iframe>
</body>
</html>
解决方案
需要向iframe的文档流写入数据的情况，通常出现在使用一个src为about:blank的iframe元素占位的情况下，因此外层iframe的onload事件没有太大意义。
可以在iframe元素之后内联一段脚本以达到写入iframe的文档流的目的，通过document.getElementsByTagName('iframe')的最后一个获取该iframe元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我去你喵的</title>
</head>
<body>
<iframe src="about:blank"></iframe>
<!-- 以下代替onload -->
<script>
var frames = document.getElementsByTagName('iframe');
var iframe = frames[frames.length - 1];
var doc = iframe.contentWindow.document;
doc.open();
doc.write('<iframe src="about:blank" onload="alert(\'!!\');"><\/iframe>');
doc.write('</body>');
doc.close();
</script>
</body>
</html>
分享到：
相关推荐
NULL 博文链接：https://snandy.iteye.com/blog/666530
javaScript的onload事件的代码，javaScript内嵌在html中。
脱离document.onload和window.onload的onload事件，可多次添加加载事件！
本来按照事件顺序，小程序初始化时触发App里的onLaunch，后面再执行页面Page里的onLoad，但是在onLaunch里请求获取是否有权限，等待返回值的时候Page里的onLoad事件就已经执行了。 //app.js App({ onLaunch: ...
本文实例讲述了JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果。分享给大家供大家参考，具体如下： <%@ page language=java import=java.util.* pageEncoding=GB2312%> <% String path...
并且随页面大小的不同情况... 解决办法是再onload触发前改变图片src的值，也就是相当于图片开始时有个临时的占位图片，页面载入过程中用js换成实际需要的src，只要每次onload事件触发前src发生变化，则onload表现正常。
之前有个需求是要判断iframe内的网页是否滚动到底部触发事件, 网上找了许多资料都是说在当前页面下的, 索性就自己研究了一下, 找到了解决方法. clientHeight：这个元素的高度，占用整个空间的高度 offsetHeight：是...
firefox不支持iframe的onreadystatechange事件，这个让我调试一下下午。。。 直接贴代码 我这里想做的效果是先生成一个iframe，当我想里面加载内容的时候触发这个事件， 代码可以很清晰的看到用onload方法来进行替代...
iframe 自动获取onload高宽 代码如下: function AutoResize(iframe) { //firefox if(iframe.contentWindow) { iframe.height = iframe.contentWindow.document.documentElement.scrollHeight; iframe.width = iframe...
主要介绍了js的image onload事件使用遇到的问题,需要的朋友可以参考下
在工作时，我们给一个元素绑定了事件，如果dom还没...有一种办法可以让我们避开这一难题：可以先创建一个匿名函数来容纳这两个函数，然后把那个匿名函数绑定到onload事件上，如下所示： [removed] = function(){ fi
判断iframe是否加载完成的完美方法IE 支持 iframe 的 onload 事件，不过是隐形的，需要通过 attachEvent 来注册。 第二种方法比第一种方法更完美(采用readystatechange判断)，因为 readystatechange 事件相对于 load...
onload事件当一个页面或是一张图片加载完成时被触发，在body上不仅可以用onload，而且还支持多个HTML标签.用法如下
代码如下: //判断iframe是否加载完成，RMid为iframe的ID document.getElementById(“RMid”).onload = function () { alert(“加载完成”); } //在父框架操作iframe页面里的AddReceipt2方法 window.frames...
前几天做的项目里有用到下拉刷新。使用了vant-ui里的 List 列表 瀑布流滚动加载，用于控制长列表的展示 先说使用 1.用npm下载该模块包 npm i vant -S 2.引入组件 官方提供了三种方法。（我使用了第三种，全局引入...
创建iframe对象，添加load事件， 再将iframe添加到body中。Chrome/Opera中会造成load事件的handler执行两次。
iframe会阻塞主页面的onload事件 主页面和iframe共享同一个连接池 阻塞主页面的onload是这两个问题中最影响性能的方面。一般都是想让onload时间越早触发越好，一方面是用户体验过更重要的是google给网站的加载速度的...