Web 通信技术 ——跨文档信息传输(JavaScript)

时间：2021-05-18 21:45:56

*/

* Copyright (c) 2016，烟台大学计算机与控制工程学院

* All rights reserved.

* 文件名：text.html

* 作者：常轩

* 微信公众号：Worldhello

* 完成日期：2016年11月2日

* 版本号：V1.0

* 程序输入：无

* 程序输出：见运行结果

*/

Web 通信新技术 ——跨文档信息传输

<!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>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

   <!-- <meta http-equiv="refresh" content="5">-->

<title>postMessage子页面</title>

</head>

<body>

   <div>

        <p>接受来自:</p>

        <h1 id="h1"></h1>

        <p>的消息：</p>

        <h1 id="p_text"></h1>

    </div>

    <input  id="texts" type="text" name="textss">

    <script type="text/javascript">

        // 窗口事件监听：监听message

        window.addEventListener("message",function(e){

            var sts="123";

            // e.origin:发送消息的地址，谁发的消息就是谁的

            // 接收时候，可以加个判断;避免接收来源不明的URL发过来的数据

            //if( e.origin != "" ){

           //     return;

          //  }

            document.getElementById("h1").innerHTML = e.origin;

            // e.data:发消息的内容

            document.getElementById("p_text").innerHTML = e.data;

            // 接收到消息后，在回过去，回个话；

            // 通过访问message的source的属性，来获取消息发送源的窗口对象，

            // 也就是能知道是谁发的消息，在通过postMessage，给发消息者回个话

            e.source.postMessage(sts,e.origin);

        },false);

    </script>

</body>

</html>

接收页面：

<!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>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--    <meta http-equiv="refresh" content="5">-->

<title>postMessage主页面</title>

</head>

<body>

    <div>

        <p>接受来自:</p>

        <h1 id="h1"></h1>

        <p>的消息：</p>

        <h1 id="p_text"></h1>

    </div>

    <iframe width="500px" height="500px" id="iframe"

        src="http://1.aboutxuan.applinzi.com/test/test.html"

        onload="send()">

    </iframe>

    <script type="text/javascript">

        // 窗口事件监听：监听message

        window.addEventListener("message",function(e){

            // e.origin:发送消息的地址，谁发的消息就是谁的

            // 接收时候，可以加个判断;避免接收来源不明的URL发过来的数据

            //if( e.origin != "http://www.aboutxuan.applinzi.com" ){

            //    return;

            //}

            document.getElementById("h1").innerHTML = e.origin;

            // e.data:发消息的内容

            document.getElementById("p_text").innerHTML = e.data;

        },false);

        // 发消息

        function send(){

            // 获取嵌入的iframe

            var iframe = window.frames[0],

                send_origin = document.getElementById("iframe").getAttribute("src");

            iframe.postMessage("我是父页面的消息",send_origin);

        }

    </script>

</body>

</html>

从自己想实现这一个功能到大体可以实现，花了点功夫。因为没有人带，所以走了些弯路。虽然现在只是有个雏形，不过还是有信心做出点东西的。加油！！！

相关文章