Chorme下iframe加载会出现两次大家有没有遇到过这种情况?在我的项目中就遇到这种问题了,iframe的onload会在chorme下调用两次,下面是一个小demo可以让你查看出来;
把这段代码放在chorme下和firefox下分别运行,会发现chorme下会调用两次onload方法,原因是:你是先把iframe append在body上,此时iframe调用了一次onload,但src是空的当然不会发生什么事情,然后给src赋值又调了一次,然后baidu被加载进来。怎么解决呢?知道了这个原理之后其实就很容易了,我们把赋值src放到append之前就好了,保证让iframe加在body之前给src赋值,如下:
[HTML]
纯文本查看
复制代码
01 02 03 04 05 06 07 08 09 10 11 | <html> <head></head> <body><div id="msg">状态:</div></body> <script> var msg = document.getElementById("msg"); var iframe = document.createElement("iframe"); iframe.onload = function(){ msg.innerHTML += "onload,"; } document.body.appendChild(iframe); iframe.src = "http://www.baidu.com" ; </script> </html> |
把这段代码放在chorme下和firefox下分别运行,会发现chorme下会调用两次onload方法,原因是:你是先把iframe append在body上,此时iframe调用了一次onload,但src是空的当然不会发生什么事情,然后给src赋值又调了一次,然后baidu被加载进来。怎么解决呢?知道了这个原理之后其实就很容易了,我们把赋值src放到append之前就好了,保证让iframe加在body之前给src赋值,如下:
[HTML]
纯文本查看
复制代码
01 02 03 04 05 06 07 08 09 10 11 | <html> <head></head> <body><div id="msg">状态:</div></body> <script> var msg = document.getElementById("msg"); var iframe = document.createElement("iframe"); iframe.onload = function(){ msg.innerHTML += "onload,"; } iframe.src = "http://www.baidu.com" ; document.body.appendChild(iframe); </script> </html> |
更多技术资讯可关注:gzitcast