关于iFrame动态创建函数

最新推荐文章于 2021-05-31 06:27:36 发布

LIXG425

最新推荐文章于 2021-05-31 06:27:36 发布

阅读量197

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/LIXG425/article/details/84321191

版权

Javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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" οnlοad="test()"></iframe>

<p><a href="#" οnclick="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" οnlοad="test()"></iframe>';

document.body.appendChild(myifr);

测试成功，函数被执行了。今天碰到这个问题，在网上搜了好久没有很好的解决办法，现在把自己的办法贴出来。这些方式在 IE / Firefox / Opera 中测试通过。

LIXG425

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于iFrame动态创建函数

http://asers.blog.sohu.com/79448433.html 目前的ajax技术还不能支持文件上传（仅仅用于IE的方式就不能算作有了），因此很多时候，在文件上传的时候需要使用iframe，更多的时候都是通过document.createElement来创建。看下面的代码：var ifr = document.createElement('iframe'...
复制链接

扫一扫