关于iFrame动态创建函数 -

lixg425

浏览: 483696 次
性别:
来自: 北京

最近访客更多访客>>

javaboy2010

fengzhou0920

leontius

Mr_冰凉

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

关于iFrame动态创建函数

博客分类：

Javascript

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

分享到：

Ajax跨子域之document.domain+iframe实现 | JavaScript 和 Ajax 开发的最佳实践

2012-10-22 00:02
浏览 1422
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

关于iFrame动态创建函数

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

关于iFrame动态创建函数

评论

发表评论

相关推荐

js 之 页面定时跳转

json eval

IE8避免网页显示混乱

windows弹出窗体

JavaScript使用小技巧

Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）

Js中 关于top、clientTop、scrollTop、offsetTop的用法

再谈Iframe的问题

1、javascript活跃博客和社区

javascript的domReady

javascript控制样式

JavaScript 创建类/对象的几种方式

js 刷新页面

JavaScript 和 Ajax 开发的最佳实践

javascript的document.write

select元素javascript常用操作

服务器端可控情形的Javascript跨域访问解决方法

DOM的基本方法

call與apply

JavaScript中的错误处理

最近访客更多访客>>

js 之页面定时跳转

Js中关于top、clientTop、scrollTop、offsetTop的用法