黑马程序员技术交流社区

标题: 【广州校区】Chorme下iframe请求多次的解决办法 [打印本页]

作者: 丁柳 时间: 2019-1-10 14:59
标题: 【广州校区】Chorme下iframe请求多次的解决办法
本帖最后由丁柳于 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>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2