js父页面和子页面相互取值

本文转载自查看原文 2017-03-28 14:48 1828 JavaScript

iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接，通信方式也不同。

一、同域下父子页面的通信

父页面parent.html

<html>
<head>
    <script type="text/javascript">
        function say(){
            alert("parent.html");
        }
        function callChild(){
            myFrame.window.say();
            myFrame.window.document.getElementById("button").value="调用结束";
        }
    </script>
</head>
<body>
    <input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()"/>
    <iframe name="myFrame" src="child.html"></iframe>
</body>
</html>

子页面child.html

<html>
<head>
    <script type="text/javascript">
        function say(){
            alert("child.html");
        }
        function callParent(){
            parent.say();
            parent.window.document.getElementById("button").value="调用结束";
        }
    </script>
</head>
<body>
    <input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()"/>
</body>
</html>

方法调用

父页面调用子页面方法：FrameName.window.childMethod();

子页面调用父页面方法：parent.window.parentMethod();

DOM元素访问

获取到页面的window.document对象后，即可访问DOM元素

注意事项

要确保在iframe加载完成后再进行操作，如果iframe还未加载完成就开始调用里面的方法或变量，会产生错误。判断iframe是否加载完成有两种方法：

1. iframe上用onload事件

2. 用document.readyState=="complete"来判断

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 jsp 使用jquery进行子页面与父页面相互取值 iframe子页面，父页面相互调用（同域） iframe父页面和子页面相互调用的方法子页面与父页面相互调用函数、元素、变量 jquery操作iframe的方法：父页面和子页面相互操作的方法 js之iframe子页面与父页面通信 js之iframe子页面与父页面通信父页面调用子页面js的方法 iframe 父页面与子页面之间的方法的相互调用 js中子页面父页面方法和变量相互调用