实战演练--js实现在网页间传递数据-js教程-PHP中文网

实战演练--js实现在网页间传递数据

php是最好的语言

发布： 2018-08-10 16:16:37

原创

2760 人浏览过

1.估计很少人知道HTML5 APIS里有一个window.postMessage API。window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个客户端之间通信。让我们来看一下window.postMessage是如何工作的。除了IE6、IE7之外的所有浏览器都支持这个功能。

2. 先创建一个index.html 文件。（在测试的的时候必须用服务器测试呀； file:// 这样地址的开头是错误的不准许访问发送（因为window.postMessage这个方法是跨域跟 ajax 差不多所以很相似））

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     body,p{
        margin: 0px;
        padding: 0px;
     }
    </style>
</head>
<body>
    
    <script>
        //弹出一个新窗口
        var domain = &#39;http://localhost:8080/chenzhenhua/&#39;;
        var myPopup = window.open(domain+&#39;lister.html&#39;,&#39;myWindow&#39;);//打开另一个网址
        //  var array=["100","liyoubing","200"];
        var array=[{"姓名":"李友冰"},{"性别":"男"}]

        //周期性的发送消息
        setInterval(function(){
           //var message = &#39;Hello!  The time is: &#39; + (new Date().getTime());
          //  console.log(&#39;blog.local:  sending message:  &#39; + message);
             //array:发送消息de数据,domain: 是url;
            myPopup.postMessage(array,domain);
        },6000);
    </script>
</body>
</html>

登录后复制

3. 在创建 lister.html 文件代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
         //监听消息反馈
       window.addEventListener(&#39;message&#39;,function(event) {
            console.log(event);
            if(event.origin !== &#39;http://localhost:8080&#39;) return;
            console.log(&#39;received response:  &#39;,event.data);

        },false);
    </script>
</body>
</html>

登录后复制

4.结果如下：