iframe的onload在Chrome/Opera中执行两次Bug

创建iframe对象，添加load事件，再将iframe添加到body中。Chrome/Opera中会造成load事件的handler执行两次。

<!DOCTYPE HTML>
<html>
<head> <meta charset="utf-8"> <title>iframe的onload在Chrome/Opera中执行两次</title>
</head>
<body><script>var ifr = document.createElement('iframe');ifr.onload = function(){alert(1);};document.body.insertBefore(ifr,document.body.childNodes[0]);ifr.src = 'http://www.baidu.com';</script>
</body>
</html>

解决方法很简单，改下代码顺序即可：创建iframe，添加到body中，最后添加load事件。所有浏览器下将表现一致。

var ifr = document.createElement('iframe');
document.body.insertBefore(ifr,document.body.childNodes[0]);
ifr.src = 'http://www.baidu.com';
ifr.onload = function(){alert(1);};

此外用Safari5测试，没有alert，一直在载入中，能持续30s以上。大家试试看呢？

iframe的onload在Chrome/Opera中执行两次Bug相关推荐

python 对应元素相乘_如何在Python中执行两个列表的元素相乘？
使用与zip()混合的列表理解:. [a*b for a,b in zip(lista,listb)] 由于您已经在使用numpy ,所以将数据存储在一个numpy数组而不是列表中是很有意义的. 一旦 ...
在谷歌浏览器中执行 JavaScript（二）
Chrome 浏览器中执行 JavaScript Console 窗口调试 JavaScript 代码谷歌浏览器打开,F12打开开发者工具选择Console,执行javascript命令创建js ...
如何在Windows CMD的一行中运行两个命令？
我想在Windows CMD控制台中运行两个命令. 在Linux中,我会这样 touch thisfile ; ls -lstrh 在Windows上如何完成? #1楼如果要创建cmd快捷方式(例如 ...
如何使用Google Authenticator在ASP.NET Core中设置两因素身份验证
介绍 (Introduction) In this article, we are going to learn how to perform two-factor authentication in ...
Chrome浏览器中使用 iframe 嵌入网页导致视频不能全屏的问题解决方法
今天无意中测试了下在 iframe 中嵌入视频, 发现全屏按钮在 Chrome 浏览器中居然无效, 试了好几个视频网站的视频都不能全屏, 但在其他浏览器中似乎都很正常, 应该是 Chrome 60 新 ...
如何在 Chrome 中执行 JavaScript 代码
前言要在浏览器中执行 JavaScript 脚本,首先你的浏览器得支持.现在主流推荐 Chrome 浏览器,也可以使用基于 Chromium的 Edge 浏览器.下面来介绍如何在 Chrome 中打 ...
iframe的onload事件
很多时候,我们会需要改变一个iframe的地址(src属性),或者使用表单(form)的target在指定的iframe进行提交后,在 iframe加载完毕(onload)时立即响应某个操作,以提高W ...
iframe 在 SAP 三款产品中的三个应用场景
这是 Jerry 2021 年的第 73 篇文章,也是汪子熙公众号总共第 350 篇原创文章. iframe 是一项历史悠久的前端技术,能够将另一个 HTML 页面嵌入到当前的宿主页面.每个通过 if ...
JavaScript 在各个浏览器中执行的耐性
IE:执行超过500W条JScript引擎语句出现提示. Firefox:执行超过10秒出现提示. Safari:执行超过5秒出现提示. Opera:无论执行多久都不会出现提示,最有耐性. C ...

iframe的onload在Chrome/Opera中执行两次Bug

iframe的onload在Chrome/Opera中执行两次Bug相关推荐

最新文章

热门文章