嵌入式iframe子页面与父页面js通信方式

浏览数：50 / 时间：2015年06月09日

iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接，有明显不同的通信方式，同域下的数据交换和DOM元素互访就简单的多了，而跨域的则需要一些巧妙的方式来实现通信。

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

父页面 Parent.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Parent.aspx.cs" Inherits="ReSenGuang.admin.iframeDemo.Parent" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>

    <script type="text/javascript">
        function parentSay() {
            alert("Parent.aspx------>I‘m at Parent.aspx");
        }
        
        function callChild()
        {
            //document.frames["myFrame"].window.say();//只适用于ie浏览器
            myFrame.window.childSay();
            myFrame.window.document.getElementById("button").value="我变了";
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" value="调用Child.aspx中的函数childSay()" onclick="callChild()">
        <iframe name="myFrame" src="Child.aspx"></iframe>
    </div>
    </form>
</body>
</html>

子页面 Child.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Child.aspx.cs" Inherits="ReSenGuang.admin.iframeDemo.Child" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>

    <script type="text/javascript">
        function childSay() {
            alert("Child.aspx--->I‘m at Child.aspx");
        }
        function callParent() {
            parent.parentSay();
            parent.window.document.getElementsByName("myFrame")[0].style.color = "red";
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="button" type="button" value="调用Parent.aspx中的parentSay()函数" onclick="callParent()">
    </div>
    </form>
</body>
</html>