html间接收post传递的数据,HTML5中使用postMessage实现两个网页间传递数据
估计很少人知道HTML5 APIS里有一个window.postMessage API。window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上,它就像是跨域的AJAX,但不是浏览器跟服务器之间交互,而是在两个客户端之间通信。让我们来看一下window.postMessage是如何工作的。除了IE6、IE7之外的所有浏览器都支持这个功能。
数据发送端
首先我们要做的是创建通信发起端,也就是数据源”source”。作为发起端,我们可以open一个新窗口,或创建一个iframe,往新窗口里发送数据,简单起见,我们每6秒钟发送一次,然后创建消息监听器,从目标窗口监听它反馈的信息。JavaScript Code复制内容到剪贴板//弹出一个新窗口
vardomain ="http://scriptandstyle.com";
varmyPopup = window.open(domain
+"/windowPostMessageListener.html","myWindow");
//周期性的发送消息
setInterval(function(){
varmessage ="Hello! The time is: "+ (newDate().getTime());
console.log("blog.local: sending message: "+ message);
//send the message and target URI
myPopup.postMessage(message,domain);
},6000);
//监听消息反馈
window.addEventListener("message",function(event) {
if(event.origin !=="http://scriptandstyle.com")return;
console.log("received response: ",event.data);
},false);
这里我使用了window.addEventListener,但在IE里这样是不行的,因为IE使用window.attachEvent。如果你不想判断浏览器的类型,可以使用一些工具库,比如jQuery或Dojo。
假设你的窗口正常的弹出来了,我们发送一条消息——需要指定URI(必要的话需要指定协议、主机、端口号等),消息接收方必须在这个指定的URI上。如果目标窗口被替换了,消息将不会发出。
我们同时创建了一个事件监听器来接收反馈信息。有一点极其重要,你一定要验证消息的来源的URI!只有在目标方合法的情况才你才能处理它发来的消息。
如果是使用iframe,代码应该这样写:JavaScript Code复制内容到剪贴板//捕获iframe
vardomain ="http://scriptandstyle.com";
variframe = document.getElementById("myIFrame").contentWindow;
//发送消息
setInterval(function(){
varmessage ="Hello! The time is: "+ (newDate().getTime());
console.log("blog.local: sending message: "+ message);
//send the message and target URI
iframe.postMessage(message,domain);
},6000);
确保你使用的是iframe的contentWindow属性,而不是节点对象。
数据接收端
下面我们要开发的是数据接收端的页面。接收方窗口里有一个事件监听器,监听“message”事件,一样,你也需要验证消息来源方的地址。消息可以来自任何地址,要确保处理的消息是来自一个可信的地址。JavaScript Code复制内容到剪贴板//响应事件
window.addEventListener("message",function(event) {
if(event.origin !=="http://davidwalsh.name")return;
console.log("message received: "+ event.data,event);
event.source.postMessage("holla back youngin!",event.origin);
},false);
上面的代码片段是往消息源反馈信息,确认消息已经收到。下面是几个比较重要的事件属性:
source – 消息源,消息的发送窗口/iframe。
origin – 消息源的URI(可能包含协议、域名和端口),用来验证数据源。
data – 发送方发送给接收方的数据。
这三个属性是消息传输中必须用到的数据。
使用window.postMessage
跟其他很web技术一样,如果你不校验数据源的合法性,那使用这种技术将会变得很危险;你的应用的安全需要你对它负责。window.postMessage就像是PHP相对于JavaScript技术。window.postMessage很酷,不是吗?以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持网页设计。
html间接收post传递的数据,HTML5中使用postMessage实现两个网页间传递数据相关推荐
- 若 PPP 协议使用同步传输技术,接收端收到的数据段中出现比特串“01011111001111101”,则真正的数据应该是()
若 PPP 协议使用同步传输技术,接收端收到的数据段中出现比特 串"01011111001111101",则真正的数据应该是 (B ) A. 0101111100111111 B. ...
- ajax跨域请求 html5,HTML5中使用postMessage实现Ajax跨域请求的方法
由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等. 常规的几种解决方法: (1) document.domain+iframe: (2) 动态创建 ...
- python java 爬数据_如何用java爬虫爬取网页上的数据
当我们使用浏览器处理网页的时候,有时候是不需要浏览的,例如使用PhantomJS适用于无头浏览器,进行爬取网页数据操作.最近在进行java爬虫学习的小伙伴们有没有想过如何爬取js生成的网络页面吗?别急 ...
- python网站数据写入mysql_python网络爬虫抓取动态网页并将数据存入数据库MySQL
简述 以下的代码是使用python实现的网络爬虫,抓取动态网页 http://hb.qq.com/baoliao/ .此网页中的最新.精华下面的内容是由JavaScript动态生成的.审查网页元素与网 ...
- 在HPUX中IA64和PA-RISC两种架构下Oracle数据文件
最近刚购回一台IA64的HP小机,装好Oracle后,经测试可以把PA-RISC架构下的oracle数据文件直接copy 过来使用.之前有看过一个在HP小机上RAC的异构就是说PA-RISC和IA64 ...
- HTML5中aside标签的两种使用方法
aside元素在网站制作中主要有以下两种使用方法 1)被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料.名次解释,等等. <article> ...
- java输入多个数据_Java中怎么读入一行输入空格隔开的多个数据
展开全部 import java.util.Scanner; public class ReadData{ public static void main(String[] args) { ReadD ...
- html网页如何传递接收地址参数
html网页如何传递接收地址参数 1.通过window.location.href中的分割符获得各个参数 /**函数功能:从href获得参数*sHref: http://www.artfh.com/a ...
- 大数据场景中语言虚拟机的应用和挑战
点击上方蓝字关注我们 大数据场景中语言虚拟机的应用和挑战 吴明瑜1,2, 陈海波1,2, 臧斌宇1,2 1 领域操作系统教育部工程研究中心,上海 200240 2 上海交通大学软件学院并行与分布式系统 ...
最新文章
- vue调试工具如何使用_教你使用Vue.js的DevTools来调试vue项目
- 判断人工智能是否可信的“四把尺子”
- 嵌入式系统学习笔记之ftp
- 成功解决ValueError: column index (256) not an int in range(256)
- ITK:应用SIN图像过滤器
- selenium控制浏览器切换页面
- 大数据分析方法管不管用
- matlab波浪力的数值模拟,【干货】二维波浪水槽以及波浪传播变形的数值模拟(附详细步骤)...
- 装饰模式(Decorate Pattern)
- SQLyog数据库导出
- Windows 本地安全策略
- matlab视频行人检测,利用MATLAB实现了视频图像行人识别与检测
- 米兔机器人恐龙拼图手册_米兔积木 篇三:我与小米积木有个约会之米兔机器人平衡车版...
- 最节省计算机硬件,在Word 的文档视图中,最节省计算机硬件资源的是( )视图.
- 中国互联网公司应该从雅虎的衰落中学到什么?
- 车载网络: 常见车载网络
- 获取复选框的被选中的值
- 人工智能的马克思主义审视
- Latex (2)Latex中插图、表格、浮动体
- micropython RX8025T 驱动简单演示