日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

[[268813]]

1、localStorage

一個窗口更新localStorage，另一個窗口監(jiān)聽window對象的”storage”事件，來實現通信。

創(chuàng)新互聯是一家專注于成都做網站、網站制作與策劃設計,雁峰網站建設哪家好?創(chuàng)新互聯做網站,專注于網站建設十多年,網設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:雁峰等地區(qū)。雁峰做網站價格咨詢:18982081108

注：兩個頁面要同源（URL的協(xié)議、域名和端口相同）

 
 
 

  
  
  
// 本窗口的設值代碼 
  
  
  
localStorage.setItem('aaa', (Math.random()*10).toString()) 
  
  
  
// 其他窗口監(jiān)聽storage事件 
  
  
  
window.addEventListener("storage", function (e) { 
  
  
  
 console.log(e) 
  
  
  
 console.log(e.newValue) 
  
  
  
}) 
 
 
 

2、WebSocket

所有的WebSocket都監(jiān)聽同一個服務器地址，利用send發(fā)送消息，利用onmessage獲取消息的變化，不僅能窗口，還能跨瀏覽器，兼容性***，只是需要消耗點服務器資源。

 
 
 

  
  
  
var ws = new WebSocket("ws://localhost:3000/") 
  
  
  
ws.onopen = function (event) { 
  
  
  
 // 或者把此方法注冊到其他事件中，即可與其他服務器通信 
  
  
  
 ws.send({now : Date.now()}); // 通過服務器中轉消息 
  
  
  
}; 
  
  
  
ws.onmessage = function (event) { 
  
  
  
 // 消費消息 
  
  
  
 console.log(event.data); 
  
  
  
} 
 
 
 

3、postMessage

借助iframe 或 window.open

回顧一下API

 
 
 

  
  
  
otherWindow.postMessage(message, targetOrigin, [transfer]); 
 
 
 

otherWindow：

其他窗口的一個引用，比如iframe的contentWindow屬性、執(zhí)行window.open返回的窗口對象、或者是命名過或數值索引的window.frames。

message：

將要發(fā)送到其他 window的數據。它將會被結構化克隆算法序列化。這意味著你可以不受什么限制的將數據對象安全的傳送給目標窗口而無需自己序列化。

targetOrigin：

通過窗口的origin屬性來指定哪些窗口能接收到消息事件，其值可以是字符串""（表示***制）或者一個URI。在發(fā)送消息的時候，如果目標窗口的協(xié)議、主機地址或端口這三者的任意一項不匹配targetOrigin提供的值，那么消息就不會被發(fā)送；只有三者完全匹配，消息才會被發(fā)送。這個機制用來控制消息可以發(fā)送到哪些窗口；例如，當用postMessage傳送密碼時，這個參數就顯得尤為重要，必須保證它的值與這條包含密碼的信息的預期接受者的origin屬性完全一致，來防止密碼被惡意的第三方截獲。如果你明確的知道消息應該發(fā)送到哪個窗口，那么請始終提供一個有確切值的targetOrigin，而不是。不提供確切的目標將導致數據泄露到任何對數據感興趣的惡意站點。

transfer 可選：

是一串和message 同時傳遞的 Transferable 對象. 這些對象的所有權將被轉移給消息的接收方，而發(fā)送一方將不再保有所有權。

 
 
 

  
  
  
/* 
  
  
  
 * A窗口的域名是，以下是A窗口的script標簽下的代碼： 
  
  
  
 */ 
  
  
  
var popup = window.open(...popup details...); 
  
  
  
// 如果彈出框沒有被阻止且加載完成 
  
  
  
// 這行語句沒有發(fā)送信息出去，即使假設當前頁面沒有改變location（因為targetOrigin設置不對） 
  
  
  
popup.postMessage("The user is 'bob' and the password is 'secret'", 
  
  
  
 "https://secure.example.net"); 
  
  
  
// 假設當前頁面沒有改變location，這條語句會成功添加message到發(fā)送隊列中去（targetOrigin設置對了） 
  
  
  
popup.postMessage("hello there!", "http://example.org"); 
  
  
  
function receiveMessage(event) 
  
  
  
{ 
  
  
  
 // 我們能相信信息的發(fā)送者嗎? (也許這個發(fā)送者和我們最初打開的不是同一個頁面). 
  
  
  
 if (event.origin !== "http://example.org") 
  
  
  
 return; 
  
  
  
 // event.source 是我們通過window.open打開的彈出頁面 popup 
  
  
  
 // event.data 是 popup發(fā)送給當前頁面的消息 "hi there yourself! the secret response is: rheeeeet!" 
  
  
  
} 
  
  
  
window.addEventListener("message", receiveMessage, false); 
  
  
  
/* 
  
  
  
 * 彈出頁 popup 域名是，以下是script標簽中的代碼: 
  
  
  
 */ 
  
  
  
//當A頁面postMessage被調用后，這個function被addEventListenner調用 
  
  
  
function receiveMessage(event) 
  
  
  
{ 
  
  
  
 // 我們能信任信息來源嗎？ 
  
  
  
 if (event.origin !== "http://example.com:8080") 
  
  
  
 return; 
  
  
  
 // event.source 就當前彈出頁的來源頁面 
  
  
  
 // event.data 是 "hello there!" 
  
  
  
 // 假設你已經驗證了所受到信息的origin (任何時候你都應該這樣做), 一個很方便的方式就是把enent.source 
  
  
  
 // 作為回信的對象，并且把event.origin作為targetOrigin 
  
  
  
 event.source.postMessage("hi there yourself! the secret response " + 
  
  
  
 "is: rheeeeet!", 
  
  
  
 event.origin); 
  
  
  
} 
  
  
  
window.addEventListener("message", receiveMessage, false); 
 
 
 

4、cookie + setInterval【差】

在頁面A設置一個使用 setInterval 定時器不斷刷新，檢查 Cookies 的值是否發(fā)生變化，如果變化就進行刷新的操作。

由于 Cookies 是在同域可讀的，所以在頁面 B 審核的時候改變 Cookies 的值，頁面 A 自然是可以拿到的。

這樣做確實可以實現想要的功能，但是這樣的方法相當浪費資源。雖然在這個性能過盛的時代，浪費不浪費也感覺不出來，但是這種實現方案，確實不夠優(yōu)雅。

5、SharedWorker

HTML5 中的 Web Worker 可以分為兩種不同線程類型，一個是專用線程 Dedicated Worker，一個是共享線程 Shared Worker。

1. Dedicated Worker直接使用new Worker()即可創(chuàng)建，這種webworker是當前頁面專有的。
2. SharedWorker可以被多個window、標簽頁、iframe共同使用，但必須保證這些標簽頁都是同源的(相同的協(xié)議，主機和端口號)

6、直接引用

其實就是直接獲取對方DOM，適用于兩個頁面在同一域；可以傳遞對象數據（對象數據使用 instanceof 做類型判斷時有坑）；參考 window.open；

例：

 
 
 

  
  
  
// 父頁面獲取子iframe 
  
  
  
document.getElementById('iframe的id').contentWindow.document 
  
  
  
// 子iframe獲取父頁面 
  
  
  
window.parent.document 
 
 
 

7、window.name

瀏覽器窗口有window.name屬性。這個屬性的***特點是，無論是否同源，只要在同一個窗口里，前一個網頁設置了這個屬性，后一個網頁可以讀取它。

父窗口先打開一個子窗口，載入一個不同源的網頁，該網頁將信息寫入window.name屬性。

 
 
 

  
  
  
window.name = data; 
 
 
 

接著，子窗口跳回一個與主窗口同域的網址。

 
 
 

  
  
  
window.location.href = 'http://parent.url.com/xxx.html'; 
 
 
 

然后，主窗口就可以讀取子窗口的window.name了。

 
 
 

  
  
  
var data = document.getElementById('iframe的id').contentWindow.name; 
 
 
 

這種方法的優(yōu)點是，window.name容量很大，可以放置非常長的字符串；缺點是必須監(jiān)聽子窗口window.name屬性的變化，影響網頁性能。

網頁名稱：前端基礎：如何實現兩個瀏覽器窗口間通信？主要有哪幾種方式？
文章來源：http://www.5511xx.com/article/djgcppo.html