最近工作中遇到一个需求,场景是:将一个pc端a页面作为主要展示内容内嵌在另一个pc端b页面中,用户在a页面中点击关闭的时候,然后b页面也实现关闭的效果。
这里首先想到就是通过iframe将a页面内嵌到b页面中,然后a页面通过postMessage
方法,把变化的数据发送给b页面,b页面通过addEventListener
接收数据,进行关闭操作。
postMessage()语法以及相关api说明
targetWindow.postMessage(message,targetOrigin,[ transfer ]);复制代码
targetWindow
window.open
(生成一个新窗口然后引用它),window.opener
(引用产生这个的窗口),HTMLIFrameElement.contentWindow
(从其父窗口引用嵌入式,可简单理解为从父级页面向自己页面进行数据传递),
window.parent
(从嵌入式内部引用父窗口,可简单理解为从子级页面向父级页面传递数据)(当前场景下所用的
window.parent
)window.frames
+索引值(命名或数字)。
message
要发送到其他窗口的数据。使用结构化克隆算法序列化数据。这意味着可以将各种各样的数据对象安全地传递到目标窗口,而无需自己序列化。
targetOrigin
targetWindow
的原点,可以是文字字符串
"*"
(表示没有首选项),也可以是URI。如果在计划调度事件时,
targetWindow
文档的方案,主机名或端口与
targetOrigin
提供的内容不匹配,则不会调度该事件;只有当所有的三个条件都匹配时,将调度该事件。该机制可以控制发送消息的位置;例如,如果
postMessage()
用于传输密码,则该参数必须是URI,其来源与包含密码的消息的预期接收者相同,以防止恶意第三方拦截密码。始终提供具体的
targetOrigin
,而不是
*
,如果您知道其他窗口的文档应该位于何处。未能提供特定目标会泄露您发送给任何感兴趣的恶意站点的数据。
transfer(可选的)
Transferable
对象序列。这些对象的所有权将提供给目标端,并且它们在发送端不再可用。
可以通过执行以下JavaScript来侦听已分派的消息:
window.addEventListener("message", msgHandler, false);
function msgHandler(event){
if (event.origin !== "http://yourhost.com") return;
// ...
}复制代码
相关属性说明:
data
从另一个窗口传递的对象。
origin
postMessage
。此字符串是协议和“://”的串联,如果存在,则为主机名,如果存在端口,则“:”后跟端口号,并且与给定协议的默认端口不同。典型起源的例子是
https://example.org
(意味着端口为
443
),
http://example.net
(意味着端口为
80
)和
http://example.com:8080
。请注意,此来源
postMessage
后的其他位置。
source
window
对象的引用;你可以使用它来建立两个不同来源的窗口之间的双向通信。
问题解决:
那么,在a页面中,可以通过下面代码发送消息:window.parent.postMessage('isClosed', 'http://yourhost.com');复制代码
在b页面中,通过下面代码即可接收到消息:
window.addEventListener('message', msgHandler, false);复制代码
relevant and important
安全问题部分
如果您不希望从其他站点接收消息,请不要为message事件添加任何事件侦听器。这是避免安全问题的完全万无一失的方法。
如果您确实希望从其他站点接收消息,则请始终使用origin和可能的source属性验证发件人的身份。任何窗口(例如,包括http://evil.example.com)都可以向任何其他窗口发送消息,并且您无法保证未知发件人不会发送恶意消息。但是,在验证了身份后,您仍应始终验证收到的消息的语法。否则,您信任的站点中的安全漏洞只能发送受信任的消息,然后可以在站点中打开跨站点脚本漏洞。
在postMessage用于将数据发送到其他窗口时,始终指定精确的目标原点,而不是*。恶意站点可以在您不知情的情况下更改窗口的位置,因此它可以拦截使用postMessage发送的数据。
在扩展中使用window.postMessage
window.postMessage可用于在chrome代码中运行的JavaScript(例如,在扩展和特权代码中),但调度事件的source属性始终为null,以此作为安全限制。(其他属性具有预期值。)
内容或Web上下文脚本无法指定targetOrigin直接与扩展(后台脚本或内容脚本)通信。Web或内容的脚本可以使用带有"*"的targetOrigin的window.postMessage与来广播到每一个侦听器,但是不鼓励这样做,因为扩展不能确定这样的消息,和其他侦听器(包括那些你不控制的侦听器)可以侦听。
内容脚本应使用runtime.sendMessage与后台脚本进行通信。Web上下文脚本可以使用自定义事件与内容脚本进行通信(如果需要,可以随机生成事件名称,以防止从客户页面进行窥探)。
最后,将消息发布到file:URL处的页面,当前要求targetOrigin参数为"*"。file://不能用作安全限制;此限制可能会在将来修改。