html5 postMessage解决跨域、跨窗口消息传递

问题:

对于跨域问题,研究了一下html5的postMessage,写了代码测试了一下,感觉html5新功能就是好用啊。
此文仅使用html5的新特性postMessage,演示其执行过程和效果:

方法解释:
postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。
postMessage(data,origin)方法接受两个参数:
1.data:你需要传递的消息,消息传递的格式有一定要求:参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以建议直接传递string类型参数。json格式使用JSON.stringify()方法对对象参数序列化,在低版本IE中引用json2.js可以实现类似效果。
2.origin:该参数指明目标窗口的源。postMessage()方法只会将message传递给指定窗口,也可以设置为"*",表示可以传递给任意窗口。

原理:

1.我的页面是parent.html,接收我发送的消息并按照要求返回消息的页面是child.html;

2.两个页面放在同一个文件夹内;

3.parent.html发送postMessage消息给child.html,child.html收到消息后通过source.postMessage返回所需信息!

具体过程如下:

我的页面是parent.html:

<html>
<div>
    <iframe id="child" src="./child.html"></iframe>
</div>
<script type="text/javascript">
    window.addEventListener(‘message‘,function(e){
        alert("msg from child:" + e.data);
    });
    window.onload=function(){//页面加载完即向iframe发送消息
        //var tmp = document.getElementById("child");
        //tmp.postMessage(‘hello babi‘,‘*‘);  //此处tmp没有postMessage方法,类型错误。
        //alert(tmp); //这是object HTMLIFrameElement类型
        //alert(window.frames[0]);  //这是object Window类型
        //以上方式不可行,只有window类型才能调用postMessage方法!
        window.frames[0].postMessage(‘hello babi‘,‘*‘);
    }
</script>
</html>

中间的文字全都来自child.html!

我们看看接收消息页面child.html:

parent页面向child页面发送了消息,那么在child页面上如何接收消息呢,监听window的message事件就可以

<html>
<p id="ll">I‘m child</p>
<p id="ll">I‘m child</p>
<p id="ll">I‘m child</p>
<p id="ll">I‘m child</p>
<script type="text/javascript">
    window.addEventListener(‘message‘,function(e){//接收信息后返回信息!
        alert("msg from parent:" + e.data);
        e.source.postMessage(‘Hello papi‘, "*");
    });
</script>
</html>

这样我们就可以接收任何窗口传递来的消息了!

我们运行一下:

这样就实现了跨域、跨窗口消息传递

时间: 2024-10-03 23:34:03

html5 postMessage解决跨域、跨窗口消息传递的相关文章

javascript 跨域子窗口关闭并刷新父窗口

//实现javascript 跨域子窗口关闭并刷新父窗口 function winOpen(url){            var win=window.open(url,'','height=480,width=670,top=300,left=300,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no');              setInterval((function(win){retur

什么是跨域 &amp; 跨域的3种解决方案

所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)端口号(port) 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石 同源策略会阻止一个域的 javascript 脚本和另外一个域的内容进行交互.例如办公内外网环境,当我们访问外网一个恶意网站的时候,恶意网站就会利用我们的主机向内网的 url 发送 ajax 请求,破坏或盗取数据 一.浏览器的非同源限制以及3种解决思路 非同源限制 无

html5 postMessage解决跨域、跨窗口消息传递(转)

仅做学习使用,原文链接:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4.上面三个问题的跨域数据传递 postMessage() 这些问题都有一些解决办法,但html5引入的message的API可以更方便.有效.安全的解决这些难题.postMessage

html5 postMessage解决跨域、跨窗口消息传递[转载]

原文:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4.上面三个问题的跨域数据传递 postMessage() 这些问题都有一些解决办法,但html5引入的message的API可以更方便.有效.安全的解决这些难题.postMessage()方法允许来自不

[跨域]跨域解决方法之Ngnix反向代理

跨域原理:http://www.cnblogs.com/Alear/p/8758331.html 介绍Ngnix之前,我么先来介绍下代理是什么~ 代理相当于中间人,中介的概念 代理分为正向代理和反向代理.(PS:本文介绍的解决跨域方法用的是反向代理) 正向代理:现在客户端发送一个请求给服务端,可是该客户端没有访问权限,于是只能交给一个代理服务器来转交该客户端的请求给服务端响应. 客户端知道请求资源地址,也能感知代理服务器的存在. 反向代理:客户端发送一个请求,代理服务器收到这个请求,判断到这个请

ajax跨域(跨源)方案之CORS

CORS是一个W3C标准,全称是"跨域资源共享",它允许浏览器向跨源的后端服务器发出ajax请求,从而克服了AJAX只能同源使用的限制. 实现CORS主要依靠后端服务器中响应数据中设置响应头信息返回的. // 在响应行信息里面设置以下内容: Access-Control-Allow-Origin: ajax所在的域名地址 Access-Control-Allow-Origin: www.oldboy.cn # 表示只允许www.oldboy.cn域名的客户端的ajax跨域访问 // *

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. 父页面中嵌入子页

session生命与跨域跨页面---小疑惑大难题(php)

session跨页面后session消失? session的存储要注意的点: 以文件的形式存储在服务器端. 生命周期有限,根据不同的服务器类型确定. 存储内容为序列化字符串 session文件存储的内容格式如下: 从图片中我们可以读出一些session信息:例如 存在一个session为error,其值为空:还存在一个session为:step,其值为0,等等信息. 现在我们已经知道session的原理机制,那么,要使session可以跨页面调取,必须满足一下几个条件: 1.开启session.

你不知道的JavaScript--Item33 跨域总结与解决办法

一.神马是跨域(Cross Domain) 说白点就是post.get的url不是你当前的网站,域名不同.例如在*aaa.com/a.html*里面,表单的提交action是bbb.com/b.html. 不仅如此,www.aaa.com和aaa.com之间也属于跨域,因为www.aaa.com是二级域名,aaa.com是根域名. JavaScript出于安全方面的考虑,是不允许跨域调用其他页面的对象的(同源策略 Same-Origin Policy). 特别注意两点: 第一,如果是协议和端口造