資訊專欄INFORMATION COLUMN
摘要：摘要以下總結的跨文檔通信方法，均是在服務器不參與的情況下服務端無需特殊的代碼實現的這里的通信，是指頁面向頁面傳遞信息大致分為以下三類通過實現雙向通信通過客戶端存儲實現通信在頁面跳轉的過程中攜帶信息中其中第一種方法沒有跨域的限制，且實現的是雙
摘要
以下總結的跨文檔通信方法，均是在服務器不參與的情況下（服務端無需特殊的代碼）實現的
這里的通信，是指頁面A向頁面B傳遞信息
大致分為以下三類
通過 window.postMessage 實現雙向通信
通過客戶端存儲實現通信
cookie
webStorage
indexedDB
在頁面跳轉的過程中攜帶信息
window.name
Url 中 hash
window.history.replace() && document.referrer
其中第一種方法沒有跨域的限制，且實現的是雙向通信；第二種方法本質上利用的是同源文檔可以訪問同一塊數據實現通信；第三種方法只能實現定向的單次的通信，且沒有跨域的限制
通過 window.postMessage 實現通信 搭建服務端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
...
以上代碼實現了通過 index1.html，新建窗口 index2.html
index1.html 向 index2.html 發送消息 messageFromIndex1
index2.html 收到來自 index1.html 的消息，并返回消息 meesageFromIndex2
index1.html 和 index2.html 互相傳遞消息的過程并不需要服務端參與
測試過程啟動服務器 node server.js
訪問 http://localhost:8888/index1.html
先后點擊 new Window 和 send Message，可以看到在 index1.html 和 index2.html 的控制臺中分別出現了 messageFromIndex2 和 messageFromIndex1
補充通過 postMessage 可以實現跨域的信息傳遞，因此也要注意傳遞信息的過程中要檢查信息的安全性
通過客戶端存儲手段實現通信將需要傳遞的信息保存在客戶端中，只有同源的文檔才能訪問，具體的實現方式有
cookie
webStorage
IndexedDB
通過設置 cookie 進行通信當服務端沒有設置 cookie 為 HttpOnly 時，可以在瀏覽器端設置和訪問 cookie，而 cookie 本質上是服務器發送到用戶瀏覽器并保存在瀏覽器上的一塊數據，同源的文檔可以訪問 cookie
修改 index1.html
...
index1
...
修改 index2.html
...
index2
...
可以看到在 index2.html 的控制臺中打印出了信息 "name=test"
通過 cookie 進行跨文檔通信，就像同源文檔訪問同一個對象
通過 webStorage 進行通信webStorage 就像一個數據庫，同源的文檔訪問同一個子數據庫
具體操作方法如下
window.localStorage.setItem(key, value)
window.localStorage.getItem(key)
通過 indexedDB 進行通信indexedDB 就是一個數據庫
修改 index1.html
...
index1
index2.html
...
修改 index2.html
...
index2
...
如此實現在 index1.html 中修改 indexedDB 中存儲的數據時，index2.html 中也可以訪問到，以此來間接實現通信
indexedDB中文入門教程詳解
頁面跳轉的過程中攜帶信息以下這些方法都沒有域的限制，但對跳轉到新頁面的方式有限制
通過 window.name 進行通信設置 window.name = message
當通過 window.location.href 或 index2.html 在當前窗口載入新頁面時，window.name 仍保存著上個頁面所設置的信息
修改 index1.html
...
index1
index2.html
...
修改 index2.html
...
index2
...
會在控制臺輸出 messageFromIndex1
通過在 url 中添加 hash 字段修改目標文檔的 url，將想要傳遞的信息保存在 url 的 hash 字段中
通過 window.history.replace() 和 document.referrer設置 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 會保存返回跳轉或打開到當前頁面的那個頁面的 url
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92932.html
摘要：注為頂級域名，為二級域名，為三級域名跨域并非瀏覽器限制了發起跨站請求，而是跨站請求可以正常發起，但返回結果被瀏覽器攔截了。四總結首先在客戶端注冊一個，然后把的名字傳給服務器。 前言 博主博客：Stillwater的博客知乎專欄：前端汪汪本文為作者原創轉載請注明出處：http://hiztx.top/2017/01/15/j... ??本文介紹了什么是跨域，為什么要跨域，以及跨域的一種...
摘要：共享內存是最快的方式，它是針對其他進程間通信方式運行效率低而專門設計的。套接字套解口也是一種進程間通信機制，與其他通信機制不同的是，它可用于不同及其間的進程通信。來自的解釋九什么受同源策略的限制，支持跨域一種新的通信協議標準。 第一次大公司面試的面經 此次面試說來也有點匆忙，本沒想過自己會那么快就想去面試大公司，并且把自己第一次面大公司的各種不足展現得一覽無余。當時11月20號左右身邊...
閱讀 3178·2021-11-22 15:25
閱讀 3855·2021-11-17 09:33
閱讀 3370·2021-11-08 13:15
閱讀 3052·2021-09-22 10:56
閱讀 542·2021-08-31 09:45
閱讀 2755·2019-08-30 13:49
閱讀 3082·2019-08-30 12:52
閱讀 1146·2019-08-29 17:05
