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>
分享到：
相关推荐
在FF（即Firefox）浏览器中，即使图片来自缓存，onload事件也会被触发，这说明了不同浏览器间在处理缓存和事件触发机制上存在差异。为了解决这个问题，需要在onload事件处理程序中重新指定img.src属性。这样做的目的...
NULL 博文链接：https://snandy.iteye.com/blog/666530
JavaScript 是一种广泛用于网页和网络应用的脚本语言，它在网页交互中扮演着重要角色，其中事件处理是其核心功能之一。事件是用户或浏览器对页面进行操作时触发的特定情况，例如点击按钮、滚动页面等。本文将详细...
接着，我们添加了一个 onload 事件处理函数，该函数将在 iframe 加载完成后触发。 方法二：使用 attachEvent 方法 在 IE 浏览器中，onload 事件不起作用，因此我们需要使用 attachEvent 方法来注册 onload 事件。...
javaScript的onload事件的代码，javaScript内嵌在html中。
标题提到的问题是`iframe`的`onload`事件在这些浏览器中会被触发两次，这可能导致不必要的操作或逻辑错误。 这个问题的根本原因在于事件监听器的添加时机。在描述中给出的示例代码中，开发者首先创建了一个`iframe`...
标题提到的问题是关于`iframe`的`onreadystatechange`事件在Firefox下不被支持的情况。 `onreadystatechange`事件是JavaScript中的一个非常重要的事件，主要用于监测DOM对象（如XMLHttpRequest或`iframe`）的就绪...
然而，由于历史原因，不同浏览器（比如Firefox和Internet Explorer）对iframe的onload事件的实现存在差异，导致直接编写跨浏览器代码可能会遇到兼容性问题。 针对上述问题，本文提供了一种兼容性解决方案。首先，...
脱离document.onload和window.onload的onload事件，可多次添加加载事件！
4. onLoad：页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成。 5. onMove：浏览器的窗口被移动时触发的事件。 6. onResize：当浏览器的窗口大小被改变时触发的事件。 7. onScroll：浏览器的滚动条位置...
例如，在IE6中，`iframe`能够正常显示，但在其他浏览器如Firefox、Chrome和Safari中，可能出现高度过小或过大，无法正确反映`iframe`内部内容的实际高度。这不仅影响用户体验，还可能破坏网页的整体布局。 #### ...
在非IE浏览器（如Firefox、Chrome等）中，我们可以直接使用`<iframe>`的`onload`事件进行绑定，例如： ```javascript var iframe = document.createElement("iframe"); iframe.src = "http://example.com"; iframe....
在这种情况下，我们可以使用 $(window).load() 方法，这个方法会等到页面所有内容加载完毕后才会触发，并且同时又没有 onload 事件的弊端。 在实际开发中，我们可以根据实际情况选择使用 ready 事件或 onload 事件...
"JavaScript触发事件列表" JavaScript是一种广泛应用于Web开发的编程语言，它提供了许多事件处理机制，以便开发者能够捕捉和响应用户交互操作。下面是JavaScript触发事件列表，涵盖了常见的事件类型和应用场景： ...
本来按照事件顺序，小程序初始化时触发App里的onLaunch，后面再执行页面Page里的onLoad，但是在onLaunch里请求获取是否有权限，等待返回值的时候Page里的onLoad事件就已经执行了。 //app.js App({ onLaunch: ...
* onLoad：页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成 * onMove：浏览器的窗口被移动时触发的事件 * onResize：当浏览器的窗口大小被改变时触发的事件 * onScroll：浏览器的滚动条位置发生变化时...
但需要注意的是，如果页面中有延迟加载的外部资源（如图片），`body.onload`可能在这些资源加载之前就触发了。 相对地，`window.onload` 是一个全局的事件，它关注的是整个页面（包括`<head>`和`<body>`）以及所有...