国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

實現(xiàn)瀏覽器內多個標簽頁之間的通信

lcodecorex / 2751人閱讀

摘要：實現(xiàn)瀏覽器內多個標簽頁之間的通信第一種方式協(xié)議首先我們得了解是什么它是一種網(wǎng)絡通信協(xié)議為什么會用到因為有缺陷，通信只可以由客戶端發(fā)起，服務器無法主動向客戶端發(fā)送消息。然后還有種共享，這種是可以多個標簽頁共同使用的。

實現(xiàn)瀏覽器內多個標簽頁之間的通信

第一種方式：websocket協(xié)議.
1.首先我們得了解websocket是什么？
它是一種網(wǎng)絡通信協(xié)議
2.為什么會用到websocket?
因為http有缺陷，通信只可以由客戶端發(fā)起，服務器無法主動向客戶端發(fā)送消息。
但如果這時，服務器有連續(xù)變化的狀態(tài)，那么就只能使用輪詢的方式來訪問。
輪詢：每隔一段時間，就發(fā)出一個詢問.
因為websocket擁有全雙工(full-duplex)通信自然可以實現(xiàn)多個標簽頁之間的通信.

第二種方式：localstorage
localstorage是瀏覽器多個標簽共用的存儲空間，所以可以用來實現(xiàn)多標簽之間的通信
這里補充一點其他的：session是會話級的存儲空間，每個標簽頁都是多帶帶的
使用方式：直接在window對象上添加監(jiān)聽，以下為例子：
標簽頁1：

標簽頁2：

storage事件，針對都是非當前頁面對localStorage進行修改時才會觸發(fā)，當前頁面修改localStorage不會觸發(fā)監(jiān)聽函數(shù)。

第三種方式：html5瀏覽器的新特性SharedWorker
關于SharedWorker
普通的webworker直接使用new Worker()即可創(chuàng)建，這種webworker是當前頁面專有的。然后還有種共享worker(SharedWorker)，這種是可以多個標簽頁、iframe共同使用的。
SharedWorker可以被多個window共同使用，但必須保證這些標簽頁都是同源的(相同的協(xié)議，主機和端口號)

使用方式
首先新建一個js文件worker.js，具體代碼如下：

// sharedWorker所要用到的js文件，不必打包到項目中，直接放到服務器即可
let data = ""
onconnect = function (e) {
  let port = e.ports[0]

  port.onmessage = function (e) {
    if (e.data === "get") {
      port.postMessage(data)
    } else {
      data = e.data
    }
  }
}

webworker端(暫且這樣稱呼)的代碼就如上，只需注冊一個onmessage監(jiān)聽信息的事件，客戶端(即使用sharedWorker的標簽頁)發(fā)送message時就會觸發(fā).

注意點
1.webworker無法在本地使用，出于瀏覽器本身的安全機制，所以我這次的示例也是放在服務器上的，worker.js和index.html在同一目錄。
2.因為客戶端和webworker端的通信不像websocket那樣是全雙工的，所以客戶端發(fā)送數(shù)據(jù)和接收數(shù)據(jù)要分成兩步來處理。示例中會有兩個按鈕，分別對應的向sharedWorker發(fā)送數(shù)據(jù)的請求以及獲取數(shù)據(jù)的請求，但他們本質上都是相同的事件--發(fā)送消息。
3.webworker端會進行判斷，傳遞的數(shù)據(jù)為"get"時，就把變量data的值回傳給客戶端，其他情況，則把客戶端傳遞過來的數(shù)據(jù)存儲到data變量中。下面是客戶端的代碼：

// 這段代碼是必須的，打開頁面后注冊SharedWorker
//顯示指定worker.port.start()方法建立與worker間的連接
    if (typeof Worker === "undefined") {
      alert("當前瀏覽器不支持webworker")
    } else {
      let worker = new SharedWorker("worker.js")
      worker.port.addEventListener("message", (e) => {
        console.log("來自worker的數(shù)據(jù)：", e.data)
      }, false)
      worker.port.start()
      window.worker = worker
    }
// 獲取和發(fā)送消息都是調用postMessage方法，我這里約定的是傳遞"get"表示獲取數(shù)據(jù)。
window.worker.port.postMessage("get")
window.worker.port.postMessage("發(fā)送信息給worker")
webSocket如何兼容低瀏覽器？

1.Adobe Flash Socket
2.ActiveX HTMLFile (IE)
3.基于 multipart 編碼發(fā)送 XHR
4.基于長輪詢的 XHR

以上內容的參考鏈接 - 多個標簽實現(xiàn)通信
關于websocket原理的有趣解釋

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53788.html

相關文章

  • 實現(xiàn)瀏覽器內多個標簽頁之間的通信

    摘要：實現(xiàn)瀏覽器內多個標簽頁之間的通信第一種方式協(xié)議首先我們得了解是什么它是一種網(wǎng)絡通信協(xié)議為什么會用到因為有缺陷，通信只可以由客戶端發(fā)起，服務器無法主動向客戶端發(fā)送消息。然后還有種共享，這種是可以多個標簽頁共同使用的。 實現(xiàn)瀏覽器內多個標簽頁之間的通信 第一種方式：websocket協(xié)議.1.首先我們得了解websocket是什么？它是一種網(wǎng)絡通信協(xié)議2.為什么會用到websocket?因...

    Freeman 評論0 收藏0

  • 實現(xiàn)瀏覽器內多個標簽頁之間的通信

    摘要：實現(xiàn)瀏覽器內多個標簽頁之間的通信第一種方式協(xié)議首先我們得了解是什么它是一種網(wǎng)絡通信協(xié)議為什么會用到因為有缺陷，通信只可以由客戶端發(fā)起，服務器無法主動向客戶端發(fā)送消息。然后還有種共享，這種是可以多個標簽頁共同使用的。 實現(xiàn)瀏覽器內多個標簽頁之間的通信 第一種方式：websocket協(xié)議.1.首先我們得了解websocket是什么？它是一種網(wǎng)絡通信協(xié)議2.為什么會用到websocket?因...

    Enlightenment 評論0 收藏0

  • 瀏覽器的工作原理整理

    摘要：渲染引擎渲染引擎也稱為瀏覽器內核，主要時在瀏覽器窗口中顯示所請求的內容，這是每個瀏覽器的核心部分。 瀏覽器的結構 瀏覽器的主要組件包括： 用戶界面——包括地址欄、前進/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示用戶請求的頁面外，其他顯示的各個部分都屬于用戶界面。 用戶界面后端——用于繪制基本的窗口小部件，比如組合框和窗口。其公開了與web應用無關的通用接口，而在底層使用操作系統(tǒng)的用戶...

    jzman 評論0 收藏0

  • 瀏覽器的工作原理整理

    摘要：渲染引擎渲染引擎也稱為瀏覽器內核，主要時在瀏覽器窗口中顯示所請求的內容，這是每個瀏覽器的核心部分。 瀏覽器的結構 瀏覽器的主要組件包括： 用戶界面——包括地址欄、前進/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示用戶請求的頁面外，其他顯示的各個部分都屬于用戶界面。 用戶界面后端——用于繪制基本的窗口小部件，比如組合框和窗口。其公開了與web應用無關的通用接口，而在底層使用操作系統(tǒng)的用戶...

    DrizzleX 評論0 收藏0

  • 瀏覽器的工作原理整理

    摘要：渲染引擎渲染引擎也稱為瀏覽器內核，主要時在瀏覽器窗口中顯示所請求的內容，這是每個瀏覽器的核心部分。 瀏覽器的結構 瀏覽器的主要組件包括： 用戶界面——包括地址欄、前進/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示用戶請求的頁面外，其他顯示的各個部分都屬于用戶界面。 用戶界面后端——用于繪制基本的窗口小部件，比如組合框和窗口。其公開了與web應用無關的通用接口，而在底層使用操作系統(tǒng)的用戶...

    lijinke666 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<