使用HTML5 的跨域通信机制进行数据同步

最新推荐文章于 2023-02-18 17:42:32 发布

JdoOudDm7i

最新推荐文章于 2023-02-18 17:42:32 发布

阅读量827

点赞数

本文链接：https://blog.csdn.net/JdoOudDm7i/article/details/62042972

版权

本文介绍了如何利用HTML5的跨文档消息机制（Cross Document Messaging）和window.postMessage API进行跨域通信，以实现离线Web应用程序与服务器的数据同步。详细阐述了发送和接收数据的代码实现，并提到了Chrome Web Application中处理跨域的权限配置。

摘要由CSDN通过智能技术生成

离线应用系统的设计目标就是在网络离线情况下依然可以操作我们的应用系统，并在网络畅通的情况下与服务器进行数据交互。

所以离线应用系统最终会做成类似C/S架构的客户端应用程序。这边基于Chrome或者 Safari浏览器的 Web Application（Web 应用程序插件）无疑是最好的选择。

这边以Chrome 的 Web Application 为例，离线系统做成Web 应用程序之后，与服务端的交互就变成最麻烦的一件事了，因为离线Web应用程序是安装在各个用户的浏览器上面，而最终的Server，只是一个由终端服务方提供的固定地址。那么从本地浏览器对Server发起请求，就存在这跨域通信的情况。

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。因为同源策略的限制，域名www.xx1.com下的js无法访问和操作www.xx2.com域名下的对象。

下面是一个关于跨域访问的说明清单，摘自博客园的一篇文章：

URL	说明	是否允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	不允许

HTML5提供了跨文档消息机制（Cross Document Messaging），它具备了跨越frame、tabs或windows通信的能力。

PostMessage API

window.postMessage是安全启用跨域通信的方法。通常情况下，不同的页面上的脚本只允许相互访问和执行他们的网页，window.postMessage提供了一个控制机制，以规避此限制的方式是安全的。

浏览器支持情况：

浏览器类型	版本号
Chrome	2.0版本及以上
FireFox	3.0版本及以上
Internet Explorer	8.0版本及以上
Opera	9.6版本及以上
Safari	4.0版本及以上

数据发送方：otherWindow.postMessage(message, targetOrigin);

otherWindow

对另一个窗口的引用，这边可以使用的contentWindow属性的iframe元素，或通过window.open返回的对象，或通过frames命名window.frames。

message

发送到其它窗口的数据。

targetOrigin

数据发送的目标地址。

数据接收方：

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)

{ if (event.origin !== "http://XXXX") return;

// ... }

event.data

获取从其他窗口传输过来的数据对象。

event.origin

postMessage的发送消息时的窗口的起源。这个字符串是该协议的串联和“:/ /”，主机名（如果有的话），和“：”如果一个端口，并从给定的协议的默认端口不同的端口号。

event.source

一个窗口之间建立双向沟通两个不同来源的窗户，代表了你目前的接收方的窗口，你可以使用这个对象发送消息。

我们离线系统中的Information.htm页面保存的是当前登录用户的相关信息，假设现在的网络是在线情况下，那我们的保存功能就需要同步保存到服务端。所以我们的Information.htm页面除了保存之外，还多了跨域通讯相关实现代码。

同样的，我们也需要一个跨域访问的服务端，那我们就做个服务端，设计数据库如下：

这个表的设计是相对于我们客户端的数据表，用来保存或者修改客户端提交上来的数据。然后我们在服务端写好与之相关的操作就行了。服务端这边也要建立一个页面:crossDomain.htm,作为跨域访问的源（附件源码中有关于服务端这块的代码）。在crossDomain.htm页面里面我们写好程序处理客户端传递过来的值。

代码如下：