A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 丁柳 于 2019-1-10 15:01 编辑

Chorme下iframe加载会出现两次大家有没有遇到过这种情况?在我的项目中就遇到这种问题了,iframe的onload会在chorme下调用两次,下面是一个小demo可以让你查看出来;

[HTML] 纯文本查看 复制代码
<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] 纯文本查看 复制代码
<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>  

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马