文档章节

html5 Postmessage解决跨域问题

noonoo
 noonoo
发布于 2015/04/05 20:23
字数 339
阅读 574
收藏 8

 

在 Cross-document messaging 中使用 postMessage 和 onmessage

为了实现不同域之间的通信,需要在操作系统的 hosts 文件添加两个域名,进行模拟。

清单 3. hosts 文件中添加两个不同的域名
 127.0.0.1 	 parent.com 
 127.0.0.1 	 child.com

在父网页中通过 iframe 嵌入子页面,并在 JavaScript 代码中调用 postMessage 方法发送数据到子窗口。

清单 4. 父页面中嵌入子页面,调用 postMessage 方法发送数据
 <html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 <title>Test Cross-domain communication using HTML5</title> 
 <script type="text/JavaScript"> 
	 function sendIt(){ 
		 // 通过 postMessage 向子窗口发送数据
		 
	 } 
 </script> 
 </head> 
 <body> 
	 <!-- 通过 iframe 嵌入子页面 --> 
	 <iframe src="http://child.com:8080/TestHTML5/other-domain.html" 
				 id="otherPage"></iframe> 
	 <br/><br/> 
	 <input type="text" id="message"><input type="button" 
			 value="Send to child.com" onclick="sendIt()" /> 
 </body> 
 </html>

在子窗口中监听 onmessage 事件,并用 JavaScript 实现显示父窗口发送过来的数据。

清单 5. 子窗口中监听 onmessage 事件,显示父窗口发送来的数据
 <html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 <title>Web page from child.com</title> 
 <script type="text/JavaScript"> 
	 //event 参数中有 data 属性,就是父窗口发送过来的数据
	 window.addEventListener("message", function( event ) { 
		 // 把父窗口发送过来的数据显示在子窗口中
	   document.getElementById("content").innerHTML+=event.data+"<br/>"; 
	 }, false ); 

 </script> 
 </head> 
 <body> 
	 Web page from http://child.com:8080 
	 <div id="content"></div> 
 </body> 
 </html>

上班后,试试可行否。

© 著作权归作者所有

共有 人打赏支持
noonoo
粉丝 16
博文 65
码字总数 34256
作品 0
深圳
程序员
私信 提问
IE8的Strong HTML5 support

印象中IE8是不支持HTML5的,后来零零碎碎看到部分HTML5支持,今天特意归档一下,看看IE8到底支持多少HTML5, stackoverflow上有人说,IE8在当年发布时,Microsoft承诺:With full CSS 2.1, ...

hell0cat
2013/04/25
0
0
如何替代即将淘汰的Flash方案?

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由MarsBoy发表于云+社区专栏 | 导语 Web技术飞速发展的如今,我们在感受新技术带来的便捷和喜悦的同时,也时常在考虑着一个问...

腾讯云加社区
10/17
0
0
如何设置iframe高度自适应,在跨域的情况下能做到吗?

  在页面上使用iframe来动态加载页面内容是网页开发中比较常见的方法。在父页面中给定一个不带滚动条的iframe,然后对属性src指定一个可加载的页面,这样当父页面被访问的时候,子页面可以...

恐空控
2013/09/01
0
1
Ajax 浏览器跨域访问控制

jsonp+ajax实现浏览器跨域通信的原理解析 php+ajax+P3P实现多域名跨域登录 一.关于跨域需要设置的响应头消息 二.关于IE8和IE9浏览器差异性说明 IE8和IE9使用新的API XDomainRequest(IE又淘气...

IamOkay
2014/11/20
0
0
postMessage的使用及BUG

postMessage的使用及BUG postMessage是html5的一个新功能,它是实现跨域通信的一种安全的策略,通过postMessage方式发送数据,通过在父子窗口添加onmessage事件进行监听,获取发送的数据,非...

dengjianqiang200
2012/10/23
0
1

没有更多内容

加载失败,请刷新页面

加载更多

移动端Appium自动化测试框架的优势

众所周知,现在市面上的移动端操作系统已被Android和IOS占领,其中Android的份额更是在80%以上。那么面对市面上林林总总的自动化测试框架和工具,为什么说Appium在自动化测试框架的统治级优势...

程序猿拿Q
5分钟前
0
0
设计模式 之 观察者模式

设计模式 之 观察者模式 场景 场景比较简单,当一个对象的状态发生改变时,自动通知所有依赖(或观察)它的对象。 比如:发布/订阅 原理:发布者存储N个订阅者的对象信息,当发布者发布消息时...

GMarshal
9分钟前
0
0
linux 常用

netstat -tunlp |grep 8080 查看8080 占用 netstat -tunlp 用于查看所有的端口号的进程情况

west_coast
13分钟前
1
0
Bytom信息上链教程

比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom 很多了解比原链的都知道,比原链是专注信息和数字资产在链上交互和流转的...

比原链Bytom
19分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部