摘要
以下总结的跨文档通信方法，均是在服务器不参与的情况下（服务端无需特殊的代码）实现的
这里的通信，是指页面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