HTML5教程：轻松实现跨文档数据传输

在JavaScript脚本程序中，出于对代码安全性的考虑，不允许跨域访问其他页面中的元素，这给不同区域的页面数据互访带来障碍。在HTML 5中，可以利用对象的postMessage方法，在两个不同域名与端口的页面之间实现数据的接收与发送功能。要想实现跨越页面间的数据互访，需要调用对象的postMessage（）方法，具体调用格式如下：

■otherWindow：数据接收数据页面的引用对象，可以是window.open的返回值，也可以是iframe的contentWindow属性，或是通过下标返回的window.frames单个实体对象。

■Message：表示所有发送的数据、字符类型，也可以是JSON对象转换后的字符内容。

■targetOrigin：表示发送数据的URL来源，用于限制otherWindow对象的接收范围，如果该值为通配符号（t），则表示不限制发送来源，指向全部的地址。

下面通过一个实例讲解在网页中实现跨文档传输数据的方法。

本实例演示了使用方法postMessage（）实现跨文档传输数据的过程。在本实例中创建了一个HTML 5页面，并在页面中添加一个<iframe>标记作为子页面。当在主页面的文本框中输入生成随机数的位数，并单击“请求”按钮后，子页面将接收该位数信息，并向主页面返回根据该位数生成的随机数。主页面能够接收指定位数的随机数，并将随机数显示在页面中，从而完成在不同文档间数据的互访功能。实例文件1.html的实现代码如下。

CSS样式文件css.css的代码如下。

(www.xing528.com)

脚本文件js1.js的代码如下。

然后通过<iframe>元素的“src”属性导入一个名称为Message.html的子页面，功能是接收主页面请求生成随机数长度的值，并返回根据该值生成的随机数。文件Message.html的代码如下。

在本实例的上述代码中，为了接收页面间传输的数据，主、子页面在页面加载时都为页面添加了message事件，添加方式如下：

如果在页面中添加“message”事件成功，那么通过方法postMessage（）向页面发送数据请求时会触发该事件，并通过事件回调函数中event对象的“data”属性捕获发送来的数据。在本实例中，将捕获的数据event.data传递给另外一个自定义函数RetRndNum（），此函数的功能是生成随机数。另外，event对象中还包含“source”与“origin”属性，分别代表发送数据对象与发送来源，可以使用“source”属性向发送数据页面返回数据；同时，还可以通过“origm”属性检测互通数据的域名是否正确，以规避因域名不正确产生的恶意代码来源，确保数据交互的安全性。在本实例中，主、子页面通过“event.origin==strOrigin”代码，判断各自请求来源是否为约定的strOrigin值。如果是，则进行下面的操作，否则不进行任何的数据交互操作。执行效果如图8-1所示。

图8-1 执行效果