zoukankan      html  css  js  c++  java
  • 父页面调用iframe里的js函数相关例程,Iframe之间通讯研究

    前些天项目碰到这个问题,在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="dsafdaaaaaaa"; 可以通过这种方式向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

    转载来自:http://www.justwinit.cn/post/6091/

    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="I am Main gg...........";
            function ggMM() {
                alert("alert Main Method.....");
            }
            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:

        <!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 ff="I am iFrame ff's value..........";
        function test() {
            alert($("#dd").val());
        }
        function callMainField() {
            alert(parent.gg);
        }
        function callMainMethod() {
            parent.ggMM();
        }
        function callMainHtml() {
            alert(parent.$("#ii").attr("id"));
        }
        function getParameter() {
            alert(window.hellobaby);
        }
        </script>
        </head>
        <body>
            <a href="#" onClick="getParameter();">接受参数</a>
            <a href="#" onClick="callMainMethod();">调用子iframe方法</a>
            <a href="#" onClick="callMainField();">调用主窗口变量</a>
            <a href="#" onClick="callMainHtml();">调用子iframe组件</a>
            <input id="dd" type="text" value="I am iFrame's id=dd value......."/>
        </body>
        </html>

    newFrame.htm:

        <!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">
        function callLevelFrame() {
            var ff=parent.$("#ii")[0].contentWindow.ff;
            alert(ff);
        }
    	function callLevelFrameMethod(){
    		parent.$("#ii")[0].contentWindow.test();;
    	}
        </script>
        </head>
        <body>
            <a href="#" onClick="callLevelFrame();">调用兄弟iframe的变量</a>
    		<a href="#" onClick="callLevelFrameMethod();">调用兄弟iframe的方法</a>
            <input id="nn" type="text" value="sdafsdfsa"/>
        </body>
        </html>
  • 相关阅读:
    求转置矩阵问题
    喷水装置
    面试之谈
    迭代任意8种数据类型数组
    Session那点事
    随机验证码
    正则表达式:网页爬虫
    模拟上传服务端
    Properties集合的练习
    用递归算法对指定目录的深度遍历
  • 原文地址:https://www.cnblogs.com/gxldan/p/4066896.html
Copyright © 2011-2022 走看看