文档章节

html5 Postmessage解决跨域问题

noonoo
 noonoo
发布于 2015/04/05 20:23
字数 339
阅读 575
收藏 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
粉丝 15
博文 70
码字总数 37138
作品 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技术飞速发展的如今,我们在感受新技术带来的便捷和喜悦的同时,也时常在考虑着一个问...

腾讯云加社区
2018/10/17
0
0
【javascript】同域多网页之间通讯问题:调用方法传参与调用队列问题

业务需要,显示项目较多。工作人员有多个显示屏(一般2个屏幕),一个屏幕显示一个浏览器窗口,每个屏幕显示不同的模块内容。 目前基本已经实现业务模块化(最基础的javascript的应用,没用任...

负心杏
2016/09/05
257
2
如何设置iframe高度自适应,在跨域的情况下能做到吗?

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

恐空控
2013/09/01
0
1
HTML5 WebMessaging 体验

下载演示文件 - 2.97 KB 简介 作为WEB开发者,经常会遇到一个问题: 跨域通信和“同源政策”的协调化。因为 JavaScript 代码不能访问位于不同 域(或子域) 或 协议 (HTTP/HTTPs) 或 端口 的代...

oschina
2014/04/29
619
0

没有更多内容

加载失败,请刷新页面

加载更多

金丝雀发布、滚动发布、蓝绿发布到底有什么差别?关键点是什么?

根据 2017 年的 DevOps 发展报告,高效能组织和低效能组织在软件交付的效率上有数量级上的差异。技术组织的软件交付能力是一种综合能力,涉及众多环节,其中发布是尤为重要的环节。 作为技术...

问题终结者
35分钟前
2
0
Kubernetes Client-go Informer 源码分析

几乎所有的Controller manager 和CRD Controller 都会使用Client-go 的Informer 函数,这样通过Watch 或者Get List 可以获取对应的Object,下面我们从源码分析角度来看一下Client go Informe...

阿里云官方博客
今天
4
0
传统IDC部署网站(三)

11. 重置密码 密钥和密码都支持远程登陆, 二选一 两个都可以登陆, 密钥相对于密码来说,相对安全一点 本地登陆无法是用密钥 修改密码 root 用户 passwd root 修改普通用户 passwd usernam...

miko0089
今天
6
0
bash特性

1.支持别名 alias 2.命令替换 $(COMMANS) 或者 `COMMAND` 3. bash支持的引号: `` :命令替换 "":弱引用,可以实现变量替换 '':强引用,不实现变量替换 4.文件名通配 globbing:(man 7 glo...

忙碌的小蜜蜂
今天
3
0
以语音评测的PC端demo代码为例,讲解口语评测如何实现

本文由云+社区发表 作者:腾讯智慧教育 概述 腾讯云智聆口语评测(英文版)(Smart Oral Evaluation-English,SOE-E)是腾讯云推出的语音评测产品,是基于英语口语类教育培训场景和腾讯云的语...

腾讯云加社区
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部