實戰演練--js實作在網頁間傳遞數據-js教程-PHP中文網

實戰演練--js實作在網頁間傳遞數據

php是最好的语言

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

原創

2758 人瀏覽過

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>

登入後複製