视频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之window.postMessageAPI
2020-11-27 15:16:33 责编:小采
文档

  window.postMessage是一个鲜为人知的HTML5 API。 window.postMessage允许两个窗口/帧之间跨域发送数据消息。从本质上讲,window.postMessage是一个跨域的无服务器垫片的Ajax。让我们一起来看看window.postMessage的例子,以及如何在火狐,IE8+,Opera,Safari和Chrome浏览器中使用它。

  第一部分:发送者

  程序的第一步是建立一个源,在这个源里面,我们将打开一个窗口(或者是iframe,如果你更喜欢的话),给另外新的窗口发送消息(因为是例子的缘故,我们将每6秒发送一次消息,同时并创建一个事件监听我们收到的从目标窗口任何回应。)

  我使用是在IE中无法工作的window.addEventListener方法(IE中window.attachEvent方法)。你可以使用MooTools/jQuery/Dojo库中做了兼容处理的方法。

  假设正确的打开了窗口,我们发送消息所指定的URI信息(包括协议,主机名和端口,如果存在的话),必须当时存在(因为用户可能已经改变的随后窗口的地址),如果这个目标窗口不存在,消息将无法发送。

  我们还要创建了一个事件处理程序,用于接收消息。这是非常重要的,您必须验证事件起源当接收到一个消息,因为消息处理程序接受来自任何URI的消息!原点一旦通过验证,你可以在任何你喜欢的方式处理所接受到的消息。

  使用iframe的时候如下:

  必须访问iframe的contentWindow属性——而不是节点本身。

  第二部分:目标窗口

  程序的第二部分是目标窗口的准备。目标窗口建立“message”事件的事件侦听器,同时应该验证信息的来源。同样的,消息事件接受从任何位置。所以建立一个信任源列表来验证消息源是很重要的。

  面的示例代码是目标窗口发送一个消息回应给发送方,确认消息已经收到了。这些事件属性十分重要:

  source——发送消息的来源窗口或者iframe

  origin——发送消息的URI(包括协议,域名和端口,如果有的话)

  data——接受的消息内容

  这三个属性对验证消息十分重要。

  使用window.postMessage注意

  像其他web技术一样,如果使用不当,就会很危险。如果没有验证消息源,它将威胁应用程序的安全。window.postmessage就像JavaScript式的PHP这方面的技术。window.postMessage很酷,不是吗?

下载本文
显示全文
专题