视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
HTML5新特性之跨文档消息传输详解
2020-11-27 15:10:12 责编:小采
文档

1、同域

所谓“同域”是指,出于http://www.gxlcms.com/wiki/397.html" target="_blank">安全考虑,浏览器只允许脚本与同样协议、同样域名、同样端口的地址进行通信。

2、window.postMessage方法

浏览器不同窗口(包括iFrame窗口)之间的通信,除非两个窗口装载的是同一个域名下的网页。window.postMessage方法就是为了解决这个问题而特定的API,可以让不同域名的窗口互相通信。

postMessage方法的格式如下:

targetWindow.postMessage(message, targetURL[, transferObject]);

上面代码的targetWindow是指向目标窗口的变量,message是要发送的消息,targetURL是指定目标窗口的网址,不符合该网址就不发送信息,transferObject则是跟随信息一起发送的Transferable对象。

假定当前网页弹出一个新窗口。

var popup = window.open(...popup details ...);

然后在当前网页上监听message事件。

window.addEventListener('message', receiveMessage, false);
function receiveMessage(e) { 
if (e.origin != 'http://example.org') { 
return;
 }

 console.log(e.data);
}

上面的代码指定message事件的回调函数是receiveMessage,一旦收到其他窗口发来的信息,receiveMessage函数就会被调用。receiveMessage函数接受一个event事件对象作为参数,该参数里的origin属性表示信息的来源网址,如果该网址不符合要求,就立刻返回。event.data属性则包含了实际发送过来的信息。

event对象的属性除了origin和data,还有一个source属性,指向向当前网页发送信息的窗口对象。

接着,在当前网页上使用postMessage方法对新窗口发送信息。

popup.postMessage('hello world!', 'http://example.org');

上面代码的postMessage方法的第一个参数是实际发送的信息,第二个参数是指定发送对象的域名必须是http://example.org。如果对方窗口不是这个域名,信息不会发送出去。

最后,在popup窗口中部署下面的代码。

//popup 窗口function receiveMessage(event) {
 event.source.postMessage('Nice to see you!', '*');
}

window.addEvengtListener('message', receiveMessage, false);

上面代码有几个地方需要注意。首先,receiveMessage函数里面没有过滤信息的来源,任意网址发来的信息都会被处理。其次,postMessage方法中指定的目标窗口的网址是一个星号,表示该信息可以向任意网址发送。通常来说,这两种做法是不推荐的,因为不够安全,可能会被对方过滤掉。

所有浏览器都支持这个方法,但是IE8和IE9只允许postMessage方法与iFrame窗口通信,不能与新窗口通信。IE10允许与新窗口通信,但是只能使用IE特有的MessageChannel对象

下载本文
显示全文
专题