跨文档通信的7种方法

阿罗发布于2019-08-22 14:51 / 2166人阅读

摘要：摘要以下总结的跨文档通信方法，均是在服务器不参与的情况下服务端无需特殊的代码实现的这里的通信，是指页面向页面传递信息大致分为以下三类通过实现双向通信通过客户端存储实现通信在页面跳转的过程中携带信息中其中第一种方法没有跨域的限制，且实现的是双

摘要

以下总结的跨文档通信方法，均是在服务器不参与的情况下（服务端无需特殊的代码）实现的

这里的通信，是指页面A向页面B传递信息

大致分为以下三类

通过 window.postMessage 实现双向通信

通过客户端存储实现通信

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 可以实现跨域的信息传递，因此也要注意传递信息的过程中要检查信息的安全性

通过客户端存储手段实现通信

将需要传递的信息保存在客户端中，只有同源的文档才能访问，具体的实现方式有

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

GPU云服务器云服务器跨文档通信深度学习的7种 js的数据7种类型在家赚钱的十种方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92932.html

跨域方法总结（一），JSONP

摘要：注为顶级域名，为二级域名，为三级域名跨域并非浏览器限制了发起跨站请求，而是跨站请求可以正常发起，但返回结果被浏览器拦截了。四总结首先在客户端注册一个，然后把的名字传给服务器。前言博主博客：Stillwater的博客知乎专栏：前端汪汪本文为作者原创转载请注明出处：http://hiztx.top/2017/01/15/j... 本文介绍了什么是跨域，为什么要跨域，以及跨域的一种...

KoreyLee 2019-08-20 13:45 评论0 收藏0
浅谈前端跨域

摘要：一什么是跨域跨域简单的理解就是同源策略的限制。同源策略限制的内容请求不能正常进行。同源策略默认地址是网页的本身。一、什么是跨域？跨域简单的理解就是JavaScript同源策略的限制。是出于安全的考虑，a.com域名下的js不能操作b.com或者c.com域名下的对象。当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算叫跨域。一个正常...

dunizb 2019-08-26 13:55 评论0 收藏0
深入浅出Ajax

摘要：在接收响应期间持续不断地触发。在请求发生错误时触发。在通信完成或者触发或事件后触发。已经接收到部分响应数据。基于标准被广泛支持。破坏程序的异常处理机制。原文（我的GitHub）：https://github.com/liangfengbo/frontend-ability/issues/1 学习大纲理解Ajax的工作原理 Ajax核心-XMLHttpRequest对象封装Aja...

megatron 2019-08-22 18:39 评论0 收藏0
头条日常实习生面经2018.11.28

摘要：共享内存是最快的方式，它是针对其他进程间通信方式运行效率低而专门设计的。套接字套解口也是一种进程间通信机制，与其他通信机制不同的是，它可用于不同及其间的进程通信。来自的解释九什么受同源策略的限制，支持跨域一种新的通信协议标准。第一次大公司面试的面经此次面试说来也有点匆忙，本没想过自己会那么快就想去面试大公司，并且把自己第一次面大公司的各种不足展现得一览无余。当时11月20号左右身边...

nanfeiyan 2019-08-23 14:58 评论0 收藏0