資訊專欄INFORMATION COLUMN
摘要：摘要以下總結(jié)的跨文檔通信方法，均是在服務(wù)器不參與的情況下服務(wù)端無需特殊的代碼實現(xiàn)的這里的通信，是指頁面向頁面?zhèn)鬟f信息大致分為以下三類通過實現(xiàn)雙向通信通過客戶端存儲實現(xiàn)通信在頁面跳轉(zhuǎn)的過程中攜帶信息中其中第一種方法沒有跨域的限制，且實現(xiàn)的是雙
摘要
以下總結(jié)的跨文檔通信方法，均是在服務(wù)器不參與的情況下（服務(wù)端無需特殊的代碼）實現(xiàn)的
這里的通信，是指頁面A向頁面B傳遞信息
大致分為以下三類
通過 window.postMessage 實現(xiàn)雙向通信
通過客戶端存儲實現(xiàn)通信
cookie
webStorage
indexedDB
在頁面跳轉(zhuǎn)的過程中攜帶信息
window.name
Url 中 hash
window.history.replace() && document.referrer
其中第一種方法沒有跨域的限制，且實現(xiàn)的是雙向通信；第二種方法本質(zhì)上利用的是同源文檔可以訪問同一塊數(shù)據(jù)實現(xiàn)通信；第三種方法只能實現(xiàn)定向的單次的通信，且沒有跨域的限制
通過 window.postMessage 實現(xiàn)通信 搭建服務(wù)端const http = require("http")
const fs = require("fs")
http.createServer((req, res) => {
fs.readFile(`.${req.url}`, (err, data) => res.end(data))
}).listen(8888)
編寫文檔 index1.html
...
index1
...
編寫文檔 index2.html
...
index2
...
以上代碼實現(xiàn)了通過 index1.html，新建窗口 index2.html
index1.html 向 index2.html 發(fā)送消息 messageFromIndex1
index2.html 收到來自 index1.html 的消息，并返回消息 meesageFromIndex2
index1.html 和 index2.html 互相傳遞消息的過程并不需要服務(wù)端參與
測試過程啟動服務(wù)器 node server.js
訪問 http://localhost:8888/index1.html
先后點擊 new Window 和 send Message，可以看到在 index1.html 和 index2.html 的控制臺中分別出現(xiàn)了 messageFromIndex2 和 messageFromIndex1
補(bǔ)充通過 postMessage 可以實現(xiàn)跨域的信息傳遞，因此也要注意傳遞信息的過程中要檢查信息的安全性
通過客戶端存儲手段實現(xiàn)通信將需要傳遞的信息保存在客戶端中，只有同源的文檔才能訪問，具體的實現(xiàn)方式有
cookie
webStorage
IndexedDB
通過設(shè)置 cookie 進(jìn)行通信當(dāng)服務(wù)端沒有設(shè)置 cookie 為 HttpOnly 時，可以在瀏覽器端設(shè)置和訪問 cookie，而 cookie 本質(zhì)上是服務(wù)器發(fā)送到用戶瀏覽器并保存在瀏覽器上的一塊數(shù)據(jù)，同源的文檔可以訪問 cookie
修改 index1.html
...
index1
...
修改 index2.html
...
index2
...
可以看到在 index2.html 的控制臺中打印出了信息 "name=test"
通過 cookie 進(jìn)行跨文檔通信，就像同源文檔訪問同一個對象
通過 webStorage 進(jìn)行通信webStorage 就像一個數(shù)據(jù)庫，同源的文檔訪問同一個子數(shù)據(jù)庫
具體操作方法如下
window.localStorage.setItem(key, value)
window.localStorage.getItem(key)
通過 indexedDB 進(jìn)行通信indexedDB 就是一個數(shù)據(jù)庫
修改 index1.html
...
index1
index2.html
...
修改 index2.html
...
index2
...
如此實現(xiàn)在 index1.html 中修改 indexedDB 中存儲的數(shù)據(jù)時，index2.html 中也可以訪問到，以此來間接實現(xiàn)通信
indexedDB中文入門教程詳解
頁面跳轉(zhuǎn)的過程中攜帶信息以下這些方法都沒有域的限制，但對跳轉(zhuǎn)到新頁面的方式有限制
通過 window.name 進(jìn)行通信設(shè)置 window.name = message
當(dāng)通過 window.location.href 或 index2.html 在當(dāng)前窗口載入新頁面時，window.name 仍保存著上個頁面所設(shè)置的信息
修改 index1.html
...
index1
index2.html
...
修改 index2.html
...
index2
...
會在控制臺輸出 messageFromIndex1
通過在 url 中添加 hash 字段修改目標(biāo)文檔的 url，將想要傳遞的信息保存在 url 的 hash 字段中
通過 window.history.replace() 和 document.referrer設(shè)置 window.history.replaceState(window.history,state, document.title, "message")
從該頁面到新頁面后，通過 document.referrer 就可以看到來自上個頁面的信息
修改 index1.html
...
index1
index2.html
...
修改 index2.html
...
index2
...
會在控制臺輸出 http://localhost:8888/messageFromIndex1
這里利用的是 window.history.replaceState() 修改 url，并不會使頁面重新加載，所以將信息存在 url 中
document.referrer 會保存返回跳轉(zhuǎn)或打開到當(dāng)前頁面的那個頁面的 url
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/92932.html
摘要：注為頂級域名，為二級域名，為三級域名跨域并非瀏覽器限制了發(fā)起跨站請求，而是跨站請求可以正常發(fā)起，但返回結(jié)果被瀏覽器攔截了。四總結(jié)首先在客戶端注冊一個，然后把的名字傳給服務(wù)器。 前言 博主博客：Stillwater的博客知乎專欄：前端汪汪本文為作者原創(chuàng)轉(zhuǎn)載請注明出處：http://hiztx.top/2017/01/15/j... ??本文介紹了什么是跨域，為什么要跨域，以及跨域的一種...
摘要：在接收響應(yīng)期間持續(xù)不斷地觸發(fā)。在請求發(fā)生錯誤時觸發(fā)。在通信完成或者觸發(fā)或事件后觸發(fā)。已經(jīng)接收到部分響應(yīng)數(shù)據(jù)。基于標(biāo)準(zhǔn)被廣泛支持。破壞程序的異常處理機(jī)制。 原文（我的GitHub）：https://github.com/liangfengbo/frontend-ability/issues/1 學(xué)習(xí)大綱 理解Ajax的工作原理 Ajax核心-XMLHttpRequest對象 封裝Aja...
摘要：共享內(nèi)存是最快的方式，它是針對其他進(jìn)程間通信方式運行效率低而專門設(shè)計的。套接字套解口也是一種進(jìn)程間通信機(jī)制，與其他通信機(jī)制不同的是，它可用于不同及其間的進(jìn)程通信。來自的解釋九什么受同源策略的限制，支持跨域一種新的通信協(xié)議標(biāo)準(zhǔn)。 第一次大公司面試的面經(jīng) 此次面試說來也有點匆忙，本沒想過自己會那么快就想去面試大公司，并且把自己第一次面大公司的各種不足展現(xiàn)得一覽無余。當(dāng)時11月20號左右身邊...
閱讀 3226·2021-11-22 15:25
閱讀 3951·2021-11-17 09:33
閱讀 3436·2021-11-08 13:15
閱讀 3122·2021-09-22 10:56
閱讀 629·2021-08-31 09:45
閱讀 2821·2019-08-30 13:49
閱讀 3135·2019-08-30 12:52
閱讀 1210·2019-08-29 17:05
