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

原文:http://www.cnblogs.com/dolphinX/p/3464056.html

一些麻烦事儿

平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题

1.页面和其打开的新窗口的数据传递

2.多窗口之间消息传递

3.页面与嵌套的iframe消息传递

4.上面三个问题的跨域数据传递

postMessage()

这些问题都有一些解决办法,但html5引入的message的API可以更方便、有效、安全的解决这些难题。postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。

postMessage(data,origin)方法接受两个参数

1.data:要传递的数据,html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化,在低版本IE中引用json2.js可以实现类似效果。

2.origin:字符串参数,指明目标窗口的源,协议+主机+端口号[+URL],URL会被忽略,所以可以不写,这个参数是为了安全考虑,postMessage()方法只会将message传递给指定窗口,当然如果愿意也可以建参数设置为"*",这样可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。

http://test.com/index.html

<div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
        <div id="color">Frame Color</div>
    </div>
    <div>
        <iframe id="child" src="http://lsLib.com/lsLib.html"></iframe>
    </div>

我们可以在http://test.com/index.html通过postMessage()方法向跨域的iframe页面http://lsLib.com/lsLib.html传递消息

window.onload=function(){
            window.frames[0].postMessage(‘getcolor‘,‘http://lslib.com‘);
        }

接收消息

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

http://lslib.com/lslib.html

window.addEventListener(‘message‘,function(e){
                if(e.source!=window.parent) return;
                var color=container.style.backgroundColor;
                window.parent.postMessage(color,‘*‘);
            },false);

这样我们就可以接收任何窗口传递来的消息了,为了安全起见,我们利用这时候的MessageEvent对象判断了一下消息源,MessageEvent是一个这样的东东

有几个重要属性

  1. data:顾名思义,是传递来的message
  2. source:发送消息的窗口对象
  3. origin:发送消息窗口的源(协议+主机+端口号)

这样就可以接收跨域的消息了,我们还可以发送消息回去,方法类似

简单的demo

在这个例子中,左边的div会根据右边iframe内div颜色变化而变化

   

http://test.com/index.html

http://lslib.com/lslib.html

在例子中页面加载的时候主页面向iframe发送’getColor‘ 请求(参数没实际用处)

window.onload=function(){
            window.frames[0].postMessage(‘getcolor‘,‘http://lslib.com‘);
        }

iframe接收消息,并把当前颜色发送给主页面呢

window.addEventListener(‘message‘,function(e){
                if(e.source!=window.parent) return;
                var color=container.style.backgroundColor;
                window.parent.postMessage(color,‘*‘);
            },false);

主页面接收消息,更改自己div颜色

window.addEventListener(‘message‘,function(e){
            var color=e.data;
            document.getElementById(‘color‘).style.backgroundColor=color;
        },false);

当点击iframe事触发其变色方法,把最新颜色发送给主页面

function changeColor () {
                var color=container.style.backgroundColor;
                if(color==‘rgb(204, 102, 0)‘){
                    color=‘rgb(204, 204, 0)‘;
                }else{
                    color=‘rgb(204,102,0)‘;
                }
                container.style.backgroundColor=color;
                window.parent.postMessage(color,‘*‘);
            }

主页面还是利用刚才监听message事件的程序处理自身变色

window.addEventListener(‘message‘,function(e){
            var color=e.data;
            document.getElementById(‘color‘).style.backgroundColor=color;
        },false);

最后

很简单的用法却解决了大问题,据说Facebook已经在使用了,而且这也是html5另一个API——web workers传递消息的方法,那么它的浏览器兼容性怎么样呢?所谓浏览器兼容性几乎变成了IE几开始支持的问题了。。。不过好消息是跟localStorage一样,IE8+都支持了,只不过有些浏览器的低版本(比如FireFox4.0)并不支持window.onmessage=function(){}这种写法,所以我么最好使用事件绑定的写法,为了兼容IE,也要判断是否支持addEventListener。

时间: 2024-10-07 20:54:21

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解决跨域、跨窗口消息传递

问题: 对于跨域问题,研究了一下html5的postMessage,写了代码测试了一下,感觉html5新功能就是好用啊. 此文仅使用html5的新特性postMessage,演示其执行过程和效果: 方法解释:postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档.多窗口.跨域消息传递.postMessage(data,origin)方法接受两个参数: 1.data:你需要传递的消息,消息传递的格式有一定要求:参数可以是JavaScript的任意基本类型或可

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

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

Iframe和Frame中实现cookie跨域的方法(转载)

在Iframe和Frame中默认是不支持Cookie跨域的,但通过设置P3P协议相关的响应头可以解决这一问题.关于p3p协议: P3P: Platform for Privacy Preferences(隐私偏好平台).隐私偏好平台(P3P)是允许网络站点来宣告它们收集的关于浏览用户他们的意向使用的信息的一个协议.原意是当用户浏览时,授予用户他们个人信息的更多控制. P3P是万维网联盟(W3C)公布的一项隐私保护推荐标准,旨在为网上冲浪的 Internet用户提供隐私保护.现在有越来越多的网站在

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.