文档章节

html5 Postmessage解决跨域问题

noonoo
 noonoo
发布于 2015/04/05 20:23
字数 339
阅读 572
收藏 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
博文 65
码字总数 34160
作品 0
深圳
程序员
IE8的Strong HTML5 support

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

hell0cat
2013/04/25
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
HTML5视频教程之canvas合成海报所遇问题及解决方案

本篇文章扣丁学堂HTML5培训小编大家分享HTML5开发方面的问题:canvas合成海报所遇问题及解决方案,HTML5不论是现在还是今后的发展相信很多人都是很看好的,下面和小编一起来了解一下HTML5开发...

扣丁学堂
08/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Bash重定向详解

Bash重定向详解 Bash的重定向指的是将命令的输入和输出导向不同地方,而不是默认的标准输入、标准输出和标准错误。Bash的重定向实际上是对标准输入、标准输出和标准错误的重置,进而将所需输...

小陶小陶
今天
3
0
EventBus原理深度解析

一、问题描述 在工作中,经常会遇见使用异步的方式来发送事件,或者触发另外一个动作:经常用到的框架是MQ(分布式方式通知)。如果是同一个jvm里面通知的话,就可以使用EventBus。由于Event...

yangjianzhou
今天
11
0
OpenCV图像处理实例:libuv+cvui显示摄像头视频

#include <iostream>#include <opencv2/opencv.hpp>#define CVUI_IMPLEMENTATION#include <cvui.h>extern "C"{#include <uv.h>}using namespace std;#define WINDOW_NAM......

IOTService
今天
3
0
openJDK之JDK9的String

1.openJDK8的String 先来看下openJDK8的String的底层,如下图1.1所示: 图1.1 底层上使用的是char[],即char数组 每个char占16个bit,Character.SIZE的值是16。 2.openJDK9中的String 图2.1...

克虏伯
今天
4
0
UEFI 模式下如何安装 Ubuntu 16.04

作者:知乎用户 链接:https://www.zhihu.com/question/52092661/answer/259583475 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 针对UEFI模式下安装U...

寻知者
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部