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

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
前端基礎(chǔ)：如何實(shí)現(xiàn)兩個(gè)瀏覽器窗口間通信？主要有哪幾種方式？

[[268813]]

1、localStorage

一個(gè)窗口更新localStorage，另一個(gè)窗口監(jiān)聽(tīng)window對(duì)象的”storage”事件，來(lái)實(shí)現(xiàn)通信。

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

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

 
 
 
    
  
  
  
  1. // 本窗口的設(shè)值代碼 
    2. 
  
  
  
  2. localStorage.setItem('aaa', (Math.random()*10).toString()) 
    3. 
  
  
  
  3. // 其他窗口監(jiān)聽(tīng)storage事件 
    4. 
  
  
  
  4. window.addEventListener("storage", function (e) { 
    5. 
  
  
  
  5.  console.log(e) 
    6. 
  
  
  
  6.  console.log(e.newValue) 
    7. 
  
  
  
  7. }) 
    8.

2、WebSocket

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

 
 
 
    
  
  
  
  1. var ws = new WebSocket("ws://localhost:3000/") 
    2. 
  
  
  
  2. ws.onopen = function (event) { 
    3. 
  
  
  
  3.  // 或者把此方法注冊(cè)到其他事件中，即可與其他服務(wù)器通信 
    4. 
  
  
  
  4.  ws.send({now : Date.now()}); // 通過(guò)服務(wù)器中轉(zhuǎn)消息 
    5. 
  
  
  
  5. }; 
    6. 
  
  
  
  6. ws.onmessage = function (event) { 
    7. 
  
  
  
  7.  // 消費(fèi)消息 
    8. 
  
  
  
  8.  console.log(event.data); 
    9. 
  
  
  
  9. } 
    10.

3、postMessage

借助iframe 或 window.open

回顧一下API

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

otherWindow：

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

message：

將要發(fā)送到其他 window的數(shù)據(jù)。它將會(huì)被結(jié)構(gòu)化克隆算法序列化。這意味著你可以不受什么限制的將數(shù)據(jù)對(duì)象安全的傳送給目標(biāo)窗口而無(wú)需自己序列化。

targetOrigin：

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

transfer 可選：

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

 
 
 
    
  
  
  
  1. /* 
    2. 
  
  
  
  2.  * A窗口的域名是，以下是A窗口的script標(biāo)簽下的代碼： 
    3. 
  
  
  
  3.  */ 
    4. 
  
  
  
  4. var popup = window.open(...popup details...); 
    5. 
  
  
  
  5. // 如果彈出框沒(méi)有被阻止且加載完成 
    6. 
  
  
  
  6. // 這行語(yǔ)句沒(méi)有發(fā)送信息出去，即使假設(shè)當(dāng)前頁(yè)面沒(méi)有改變location（因?yàn)閠argetOrigin設(shè)置不對(duì)） 
    7. 
  
  
  
  7. popup.postMessage("The user is 'bob' and the password is 'secret'", 
    8. 
  
  
  
  8.  "https://secure.example.net"); 
    9. 
  
  
  
  9. // 假設(shè)當(dāng)前頁(yè)面沒(méi)有改變location，這條語(yǔ)句會(huì)成功添加message到發(fā)送隊(duì)列中去（targetOrigin設(shè)置對(duì)了） 
    10. 
  
  
  
  10. popup.postMessage("hello there!", "http://example.org"); 
    11. 
  
  
  
  11. function receiveMessage(event) 
    12. 
  
  
  
  12. { 
    13. 
  
  
  
  13.  // 我們能相信信息的發(fā)送者嗎? (也許這個(gè)發(fā)送者和我們最初打開的不是同一個(gè)頁(yè)面). 
    14. 
  
  
  
  14.  if (event.origin !== "http://example.org") 
    15. 
  
  
  
  15.  return; 
    16. 
  
  
  
  16.  // event.source 是我們通過(guò)window.open打開的彈出頁(yè)面 popup 
    17. 
  
  
  
  17.  // event.data 是 popup發(fā)送給當(dāng)前頁(yè)面的消息 "hi there yourself! the secret response is: rheeeeet!" 
    18. 
  
  
  
  18. } 
    19. 
  
  
  
  19. window.addEventListener("message", receiveMessage, false); 
    20. 
  
  
  
  20. /* 
    21. 
  
  
  
  21.  * 彈出頁(yè) popup 域名是，以下是script標(biāo)簽中的代碼: 
    22. 
  
  
  
  22.  */ 
    23. 
  
  
  
  23. //當(dāng)A頁(yè)面postMessage被調(diào)用后，這個(gè)function被addEventListenner調(diào)用 
    24. 
  
  
  
  24. function receiveMessage(event) 
    25. 
  
  
  
  25. { 
    26. 
  
  
  
  26.  // 我們能信任信息來(lái)源嗎？ 
    27. 
  
  
  
  27.  if (event.origin !== "http://example.com:8080") 
    28. 
  
  
  
  28.  return; 
    29. 
  
  
  
  29.  // event.source 就當(dāng)前彈出頁(yè)的來(lái)源頁(yè)面 
    30. 
  
  
  
  30.  // event.data 是 "hello there!" 
    31. 
  
  
  
  31.  // 假設(shè)你已經(jīng)驗(yàn)證了所受到信息的origin (任何時(shí)候你都應(yīng)該這樣做), 一個(gè)很方便的方式就是把enent.source 
    32. 
  
  
  
  32.  // 作為回信的對(duì)象，并且把event.origin作為targetOrigin 
    33. 
  
  
  
  33.  event.source.postMessage("hi there yourself! the secret response " + 
    34. 
  
  
  
  34.  "is: rheeeeet!", 
    35. 
  
  
  
  35.  event.origin); 
    36. 
  
  
  
  36. } 
    37. 
  
  
  
  37. window.addEventListener("message", receiveMessage, false); 
    38.

4、cookie + setInterval【差】

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

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

這樣做確實(shí)可以實(shí)現(xiàn)想要的功能，但是這樣的方法相當(dāng)浪費(fèi)資源。雖然在這個(gè)性能過(guò)盛的時(shí)代，浪費(fèi)不浪費(fèi)也感覺(jué)不出來(lái)，但是這種實(shí)現(xiàn)方案，確實(shí)不夠優(yōu)雅。

5、SharedWorker

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

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

6、直接引用

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

例：

 
 
 
    
  
  
  
  1. // 父頁(yè)面獲取子iframe 
    2. 
  
  
  
  2. document.getElementById('iframe的id').contentWindow.document 
    3. 
  
  
  
  3. // 子iframe獲取父頁(yè)面 
    4. 
  
  
  
  4. window.parent.document 
    5.

7、window.name

瀏覽器窗口有window.name屬性。這個(gè)屬性的***特點(diǎn)是，無(wú)論是否同源，只要在同一個(gè)窗口里，前一個(gè)網(wǎng)頁(yè)設(shè)置了這個(gè)屬性，后一個(gè)網(wǎng)頁(yè)可以讀取它。

父窗口先打開一個(gè)子窗口，載入一個(gè)不同源的網(wǎng)頁(yè)，該網(wǎng)頁(yè)將信息寫入window.name屬性。

 
 
 
    
  
  
  
  1. window.name = data; 
    2.

接著，子窗口跳回一個(gè)與主窗口同域的網(wǎng)址。

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

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

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

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


當(dāng)前標(biāo)題：前端基礎(chǔ)：如何實(shí)現(xiàn)兩個(gè)瀏覽器窗口間通信？主要有哪幾種方式？
本文網(wǎng)址：http://m.5511xx.com/article/djgcppo.html