js调用iframe框架中的方法
来源:原创
时间:2015-10-06
作者:脚本小站
分类:JS/JQuery
js调用iframe框架中的方法,一共有三种方法可以实现,下面我来总结一下。
方法一
iframe_.contentWindow.test();
iframe_ 抓取框架的DOM对象
contentWindow 固定写法
test() 要调用的方法(在被调用页面中)
方法二
window.frames[0].test();
window window对象
frames[0] window对象下的框架对象集合,选取第0个元素
test() 要调用的方法
方法三
window.xxx.test();
window window对象
xxx 框架的name="xxx"
test() 要调用的方法
下面是测试代码,打开注释一个一个测试一下就明白了。
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <iframe id="iframe" name="xxx" src="iframe.html" width="500" frameborder="0"></iframe> <div id="dianji">点击</div> <script type="text/javascript"> var dianji = document.getElementById('dianji'); var iframe_ = document.getElementById('iframe'); //方法一 dianji.onclick = function (){ iframe_.contentWindow.test(); } /* //方法二 dianji.onclick = function (){ window.frames[0].test(); } //方法三 dianji.onclick = function (){ window.xxx.test(); } */ </script> </body> </html>
被iframe调用页面 iframe.html
<html> <head> <title>Title</title> </head> <body> <span id="ttt">DDDD</span> <script> function test(){ alert('iframe'); } </script> </body> </html>