[实践Ok]父页面调用iframe里的js函数相关例程，Iframe之间通讯研究。

jackxiang 2013-3-6 09:56

前些天项目碰到这个问题，在ie下可以直接调用iframe里的js函数
如:
document.getElementById('iframedemo').targetfunction();
但是这段代码在firefox下报错，于是上google搜索，发现一个解决办法，在ie和firefox
下均工作正常,代码如下:
document.getElementById('iframedemo').contentWindow.demofunction();
其中iframedemo是iframe的id

来自：http://www.cnblogs.com/lovelace821/archive/2009/08/03/1537777.html
补充：
contentWindow属性是指指定的frame或者iframe所在的window对象
在IE中iframe或者frame的contentWindow属性可以省略，但在Firefox中如果要对iframe对象进行编辑则
必须指定contentWindow属性。

主要知识点

1：document.getElementById("ii").contentWindow 得到iframe对象后，就可以通过contentWindow得到iframe包含页面的window对象，然后就可以正常访问页面元素了；

2：$("#ii")[0].contentWindow 如果用jquery选择器获得iframe，需要加一个【0】；

3：$("#ii")[0].contentWindow.$("#dd").val() 可以在得到iframe的window对象后接着使用jquery选择器进行页面操作;

4：$("#ii")[0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa"; 可以通过这种方式向iframe页面传递参数，在iframe页面window.hellobaby就可以获取到值，hellobaby是自定义的变量；

5：在iframe页面通过parent可以获得主页面的window，接着就可以正常访问父亲页面的元素了；

6：parent.$("#ii")[0].contentWindow.ff; 同级iframe页面之间调用，需要先得到父亲的window，然后调用同级的iframe得到window进行操作；

来自：http://bakcom.iteye.com/blog/1757449

找了一篇文章的实践情况如下：
实践内容来自：http://bakcom.iteye.com/blog/1757449
main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>显示图表</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')    
</script>  
<script type="text/javascript">
    var gg="dsafdsafdsafdsafsdaf";
    function ggMM() {
        alert("2222222222222222222222222222222");
    }
    function callIframeMethod() {
        //document.getElementById("ii").contentWindow.test();
        $("#ii")[0].contentWindow.test(); //用jquery调用需要加一个[0]
    }
    function callIframeField() {
        alert($("#ii")[0].contentWindow.ff);
    }
    function callIframeHtml() {
        alert($("#ii")[0].contentWindow.$("#dd").val());
        //alert($("#ii")[0].contentWindow.document.getElementById("dd").value);
        //alert($("#ii")[0].contentWindow.document.getElementById("dd").value);             
    }   
    function giveParameter() {
        $("#ii")[0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa";
    }
</script>
</head>
<body>
    <a href="#" onClick="giveParameter();">参数传递</a>
    <a href="#" onClick="callIframeMethod();">调用子iframe方法</a>
    <a href="#" onClick="callIframeField();">调用子iframe变量</a>
    <a href="#" onClick="callIframeHtml();">调用子iframe组件</a></br>  
    <iframe id="ii" src="frame.htm" width="100%" frameborder="0"></iframe>
    <iframe id="new" src="newFrame.htm" width="100%" frameborder="0"></iframe>
</body>
</html>

frame.htm

newFrame.htm：

作者：jackxiang@向东博客专注WEB应用构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除
地址：http://jackxiang.com/post/6091/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明！

最后编辑： jackxiang 编辑于2013-3-6 13:24

浏览器中的Flash发出的post，get请求如何获取？

个人感觉未来的产品的走向趋势

评论列表

向东博客专注WEB应用构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除|赢在IT，Playin' with IT,Focus on Killer Application,Marketing Meets Technology.

[实践Ok]父页面调用iframe里的js函数相关例程，Iframe之间通讯研究。

分类

最新日志

链接

向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除|赢在IT，Playin' with IT,Focus on Killer Application,Marketing Meets Technology.

[实践Ok]父页面调用iframe里的js函数相关例程，Iframe之间通讯研究。

分类

最新日志

链接

向东博客专注WEB应用构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除|赢在IT，Playin' with IT,Focus on Killer Application,Marketing Meets Technology.