档案
日志
相册
视频
分享
2008-02-18 | 关于iFrame的onload问题解决
目前的ajax技术还不能支持文件上传（仅仅用于IE的方式就不能算作有了），因此很多时候，在文件上传的时候需要使用iframe，更多的时候都是通过document.createElement来创建。看下面的代码：
var ifr = document.createElement('iframe');
ifr.onload = function() { alert('ok'); }
with(ifr){
style.width = "200px";
style.height = "200px";
src = http://www.baidu.com;
}
document.body.appendChild(ifr);
这个时候，在firefox下面可以看到弹出的Alert信息，但是Ie却没有任何反应，原因分析来分析去还是没有非常好的解释。有一个比较折中的办法是通过修改函数来动态的修改在页面中静态创建的iframe的onload事件：
<html>...<body>
<iframe id="ifr" width="200px" height="200px" src="about:blank" onload="test()"></iframe>
<p><a href="#" onclick="go()">test</a></p>
</body></html>
<script>
var test = function() {}
function go() {
test = function() { alert('ok');}
document.getElementById('ifr').src = http://www.baidu.com;
}
</script>
在IE中测试可以知道，并非iframe不支持onload事件，而是对动态创建和修改的onload事件函数没有反应，那么折中的就是给onload事先绑定一个空函数，在需要时，去修改这个函数的值。（js的函数其实就是存储了一段代码的变量而已）。那么这样可以达到修改onload的效果。
一个我自己也不十分明确的说法是，ie在检测到iframe的时候，似乎就把他的状态设为完成了，通过createElement创建的iframe，似乎在创建的一瞬间他的onload就完成了，后面的onload设定大概也就无效了，既然如此可以跳过这个步骤，不使用createElement创建iframe，逃过IE的检测。看下面的代码：
var myifr = document.createElement('div');
myifr.innerHTML = '<iframe id="myifr" src = http://www.baidu.com width="200px" height="200px" onload="test()"></iframe>';
document.body.appendChild(myifr);
测试成功，函数被执行了。今天碰到这个问题，在网上搜了好久没有很好的解决办法，现在把自己的办法贴出来。这些方式在 IE / Firefox / Opera 中测试通过。
分享 |
姚明赛场竟遭对手“强吻”(图)
王治郅:篮球不会有太多奇迹存在
印度铜牌得主获奖300万
|
 |
组图：霍家否认迎娶郭晶晶 组图：诧异！北京奥运会十大意外 |
 |
 |
 |
评论
想第一时间抢沙发么？