html5 Postmessage解决跨域问题

在 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>

上班后,试试可行否。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏软件测试经验与教训

Fiddler用法整理

读书与实践是获取知识的主要渠道,学习的权力只掌握在每个人自己手中,让学习成为一种生活的习惯,这比任何名牌大学的校徽重要得多!

19910
来自专栏java闲聊

SpringBoot+Vue2.x登陆功能

33440
来自专栏HTML5学堂

深入剖析iframe跨域问题

HTML5学堂:本文当中我们介绍了跨域的基本知识,讲解到了跨域的相关种类,并讲解了解决跨域中的一种方法——如何使用iframe跨域。讲解了iframe跨域的基本...

2.2K40
来自专栏PhpZendo

HTML 5 Web Workers 的基本信息

要将有趣的应用(例如从侧重服务器端的实施)移植到客户端 JavaScript,存在很多制约瓶颈。其中包括浏览器兼容性、静态类型、可访问性和性能。幸运的是,随着浏...

11410
来自专栏HTML5学堂

控制台断点调试

HTML5学堂:在项目开发过程中,难免会需要调试一些数据,而大量的console.log()需要频繁切换JS和页面,同时最后有可能还忘记删除打印信息。使用断点调...

44740
来自专栏黑白安全

WordPress 4.9.6任意文件删除漏洞利用

WordPress是目前网络上最受欢迎的CMS。约有30%的网站都在使用它。这种广泛的采用,也使其成为了网络犯罪分子非常感兴趣的一个目标.RIPS团队在7个月前...

29250
来自专栏Python攻城狮

web服务器1.HTTP协议介绍2.http协议分析3.总结4Web静态服务器

HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写。它的发展是万维网协会(World Wide Web Consorti...

9310
来自专栏野路子程序员

Laravel 视图中AJAX请求、jquery-ujs异步使用DELETE请求时配置X-CSRF-TOKEN

34960
来自专栏码生

实现更安全、高扩展的自定义键盘 非UIButton

自定义键盘的封装网上的例子比比皆是,有的封装的非常完美,直接pod 集成到项目中便可以简单的使用,可是为什么我还要自定义一个呢? 一不是不是为了显摆,二不是网...

12920
来自专栏前端吧啦吧啦

手把手教你全家桶之React(一)

45690

扫码关注云+社区

领取腾讯云代金券