BBS.ChinaUnix.net
今日推荐    首页 | 新闻 | Linux | AIX | 博客 | 论坛 | 存储 | 人才 | 培训 | 知识库 | 资料 | 读书 | 手册 | 精华 | 下载 | 空间     
  会员: 密码: 免费注册 | 忘记密码 | 会员登录 | 搜索 | 帮助 


解决动态创建的iframe的onload事件问题的方法

首页 » 论坛 » Web开发 »  
[打印] [订阅] [收藏] [推荐给朋友] [本帖文本页]
a_coder
精灵



UID:163622
注册:2004-6-8
最后登录: 2008-04-07
帖子:230
精华:1

可用积分:662
信誉积分:105
专家积分:0 (本版)

状态:...离线...

[个人空间] [短信] [博客]


顶部
1楼 发表于 2008-2-18 14:12 
今天写代码时,需要创建一个iframe,并且给他的onload事件定义function,遇到了问题,在google搜了一下没有好的解决办法,下面把解决办法贴出来:

--------------------------------------------------------------------------------------
从我的blog贴过来的,原文:http://asers.blog.sohu.com/79448433.html
--------------------------------------------------------------------------------------

目前的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 中测试通过。



您对本贴的看法:鲜花[0] 臭蛋[0]
CU可用积分兑换Linux/Unix精品图书 |《Ubuntu标准教程》书评获奖名单公布

首页 » 论坛 » Web开发 »


 


Copyright © 2001-2008 ChinaUnix.net All Rights Reserved     联系我们:

感谢所有关心和支持过ChinaUnix的朋友们    转载本站内容请注明原作者名及出处

京ICP证041476号


清除 Cookies - ChinaUnix - Archiver - WAP - TOP

Processed in 0.054618 second(s), 4 queries , Gzip enabled