JavaScript:父子页面(iframe)之间通信实例

最新推荐文章于 2024-08-14 09:30:44 发布

annkie

最新推荐文章于 2024-08-14 09:30:44 发布

阅读量2.7k

点赞数

分类专栏： JavaScript 文章标签： JavaScript iframe

本文链接：https://blog.csdn.net/annkie/article/details/8740932

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了一种设计思路，即在JavaScript中通过iframe实现父子页面间的通信。左侧菜单切换中间内容，中间内容切换右侧详细信息。父页面作为仲裁者，所有通信通过parent对象进行，子页面使用parent.func()调用父页面函数。示例包括index.html、left.html、middle.html、middle_sms.html、right.html和right_sms.html等文件。

摘要由CSDN通过智能技术生成

假定有一个主页面，切入左中右三个页面，左边切换中间的内容，中间切换右边的内容。

如：左侧为主菜单，中间为每个菜单对应列表概要，右边为每个子菜单的明细功能。

设计思路为主页面（parent）承担仲裁者的角色，各个子页面均通过parent进行通信，彼此不直接进行通信。

父页面调用子页面的函数：

subframename.window.func();

或

document.getElementById("subframeid").window.func();

子页面调用父页面的函数：

parent.func();

涉及代码如下：

主页面：index.html

<html>
    
    <head>
        
        <script type="text/javascript">
            
            //供子页面调用，即left页面调用，对middle页面进行控制。
        function changeMiddle(sender) {
            //alert(sender.id);
            middle.document.location = "middle_"+sender.id+".html";
        }
         //供子页面调用即middle页面调用，对right页面进行控制。
         function changeRight(sender) {
            //alert("call parent changeRight");
            //alert(right.document.location);
            //refresh child 
            right.document.location = "right_sms.html";
            //right.window.refresh_data(sender);
        }
        //直接更新页面数据，因为页面是重定向的，只有重定向以后调用才有效
        function refreshRight(sender) {
            //alert("refresh right");
            right.window.refresh_data(sender);
        }
        </script>
        
    </head>
    
    <body>
        <iframe id="left" name="left" src="left.html" width="10%"></iframe>
        <iframe id="middle" name="middle" src="middle.html" width="30%"></iframe>       
        <iframe id="right" name="right" src="right.html" width="50%"></iframe>
    </body>
</html>

left.html

<html>
    <head>
        <script type="text/javascript">
            //本地代理接口
        function changeMiddle(sender) {
         //   alert(sender.id);
         //调用父接口对Middle页面进行控制
         parent.changeMiddle(sender);   
        }
        </script>
    </head>
    <body>
    <table>
        <tr>
            <td>
                <img width="40" height="40" id="sms" src="menu_sms.png" οnclick="changeMiddle(this);">
            </td>
        </tr>
        <tr>
            <td>
                <img width="40" height="40" id="mms" src="menu_sms.png" οnclick="changeMiddle(this);">
            </td>
        </tr>
        
    </table>
    </body>
</html>

middle.html (空）

middle_sms.html

<html>
    <head>
        <script type="text/javascript">
               //本地代理接口
        function changeRight(sender) {
            //调用父接口对Right页面进行控制
            parent.changeRight(sender);
        }
        //本地代理接口
        function refreshRightDirect(sender) {
            //alert("refreshRightDirect");
             //调用父接口对Right页面进行刷新，不会reload
            parent.refreshRight(sender);
        }
        </script>
    </head>
    <body>
    <table>
        <tr>
            <td>
                <h1>
                    <p οnclick="changeRight(this);" id="middle_sms_1">
                        Middle SMS 1,Click to refresh right
                    </p>
                </h1>
            </td>
        </tr>
             <tr>
            <td>
                <h1>
                    <p οnclick="refreshRightDirect(this);" id="middle_sms_2">
                        Middle SMS 2,Click to refresh right
                    </p>
                </h1>
            </td>
        </tr>
    </table>
    </body>
</html>

right.html(空)

right_sms.html

<html>
    <head>
        <script type="text/javascript">
            //本地函数，对本地数据进行修改
            //在onload加载，即页面加载完成以后再更新
         function refresh_data(sender) {
            //get data from web service
            //alert("child's function called from parent");
             //alert(document.getElementById("rightsms").innerHTML);
            document.getElementById("rightsms").innerHTML = "Right SMS Changed" + 100*Math.random();
        }
        </script>
    </head>
    <body οnlοad="refresh_data(this);">
    <table>
        <tr>
            <td>
                <h2>
                    <div id="rightsms">
                        Right SMS 1
                    </div>
                </h2>
            </td>
        </tr>
             <tr>
            <td>
                <h2>
                    <div id="right_sms_2">
                        Right SMS 2
                    </div>
                </h2>
            </td>
        </tr>
    </table>
    </body>
</html>