跨文档消息传送(cross-document messaging),有时候简称为 XDM,指的是在来自不同域的页面间传递消息。 XDM 的核心是 postMessage() 方法。在 HTML5 规范中,除了 XDM 部分之外的其他部分也会提到这个方法名,但都是为了同一个目的:向另一个地方传递数据。对于 XDM 而言,“另一个地方”指的是包含在当前页面中的 </code> 元素,或者由<a href="https://www.jb51.cc/tag/dangqianyemian/" target="_blank" class="keywords">当前页面</a>弹出的窗口。 <br><code>postMessage()</code> <a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>接收两个参数:一条消息和<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>表示消息接收方来自哪个域的字符串。第二个参数对保障安全通信非常重要,可以防止浏览器把消息发送到不安全的地方。</p> <pre><code>//注意:所有<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a> XDM 的浏览器也<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a> iframe 的 conten<a href="https://www.jb51.cc/tag/twind/" target="_blank" class="keywords">twind</a>ow <a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a> var iframeWindow = document.getElementById("myframe").conten<a href="https://www.jb51.cc/tag/twind/" target="_blank" class="keywords">twind</a>ow; iframeWindow.postMessage("A secret","http://www.wrox.com");</code></pre> <p>最后一行<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>尝试向内嵌框架中发送一条消息,并指定框架中的文档必须来源于 "http://www.wrox.com" 域。如果来源匹配,消息会传递到内嵌框架中;否则,postMessage() 什么也不做。这一限制可以避免窗口中的位置在你不知情的情况下发生改变。如果传给 postMessage() 的第二个参数是 "*" ，则表示可以把消息发送给来自任何域的文档,但我们不推荐这样做。 </p> <p>接收到 XDM 消息时,会触发 window 对象的 message 事件。这个事件是以异步形式触发的,因此从发送消息到接收消息(触发接收窗口的 message 事件)可能要经过一段时<a href="https://www.jb51.cc/tag/jiande/" target="_blank" class="keywords">间的</a>延迟。 触发 message事件后,传递给 onmessage 处理程序的事件对象包含以下三方面的重要信息。</p> <ul> <li><p>data :作为 postMessage() 第<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>参数传入的字符串数据。</p></li> <li><p>origin :发送消息的文档所在的域,例如 "http://www.wrox.com" 。</p></li> <li><p>source :发送消息的文档的 window 对象的代理。这个代理对象主要用于在发送上一条消息的窗口中<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a> postMessage() <a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>。如果发送消息的窗口来自同<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>域,那这个对象就是window 。<br>接收到消息后验证发送窗口的来源是至关重要的。就像给 postMessage() <a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>指定第二个参数,以确保浏览器不会把消息发送给未知<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>一样,在 onmessage 处理程序中检测消息来源可以确保传入的消息来自已知的<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>。基本的检测模式如下。</p></li> </ul> <pre><code>EventUtil.addHandler(window,"message",function(event){ //确保发送消息的域是已知的域 if (event.origin == "http://www.wrox.com"){ //处理接收到的数据 processMessage(event.data); //可选:向来源窗口发送回执 event<a href="https://www.jb51.cc/tag/so/" target="_blank" class="keywords">.so</a>urce.postMessage("Received!","http://p2p.wrox.com"); } });</code></pre> <p>还是要提醒大家,event<a href="https://www.jb51.cc/tag/so/" target="_blank" class="keywords">.so</a>urce 大多数情况下只是 window 对象的代理,并非实际的 window 对象。换句话说,不能通过这个代理对象访问 window 对象的其他任何信息。记住,只通过这个代理<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>postMessage() 就好,这个<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>永远存在,永远可以<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>。<br> # 原生拖放<br> # 媒体元素<br> # 历史状态管理</p><div class="topcard-tags"></div> </div> </div> </div> <!-- row end--> <div class="clearfix"></div> <!-- row --> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <div class="title"><h1>相关文章</h1></div><div class="list_con"> <img src="https://m.jb51.cc/res/2024/09-25/18/879e7ec08a36083a57dfc8b44214469d.gif" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4742335.html" title="自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗">自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗</a> </div> <div class="summary">前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为l...</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2024/09-25/18/84bd76d88488cafdfb2789b5a991fecf.png" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4742334.html" title="nice-validator表单验证插件的简单使用">nice-validator表单验证插件的简单使用</a> </div> <div class="summary">前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2024/09-25/18/cf659cff914621d918c6072273c30973.gif" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4742333.html" title="基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现">基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现</a> </div> <div class="summary">前言 图片上传是web项目常见的需求，我基于之前的博客的代码...</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2024/09-25/18/02f80db4fdf55f3a24674e2854e018f2.png" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4742332.html" title="踹掉后端，前端导出Excel！">踹掉后端，前端导出Excel！</a> </div> <div class="summary">前言 导出Excel文件这个功能，通常都是在后端实现返回前端一...</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2024/09-25/18/db8dce1453ed09a8230451f2a9fcdc68.png" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4742331.html" title="Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量">Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量</a> </div> <div class="summary">前言 众所周知，js是单线程的，从上往下，从左往右依次执行，...</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2024/09-25/18/1cd1c972ce822d1a99b7d1b2c8f9cfcd.png" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4742330.html" title="select标签 禁止选择但又能通过序列化form表单传值到后台">select标签 禁止选择但又能通过序列化form表单传值到后台</a> </div> <div class="summary">前言 项目开发中，我们可能会碰到这样的需求：select标签，禁...</div> </div></div> </div> <!-- row end--> </div> </div> <footer id="footer"> <div class="container"> <div class="copyright"> Copyright © 2018 编程之家. 当前版本 V7.0.16<br> <span class="ml5">编程之家 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-8</a> </div> </div> </footer> <script src="https://m.jb51.cc/js/count.js"></script> </body> </html>
postMessage()
</code> 元素,或者由<a href="https://www.jb51.cc/tag/dangqianyemian/" target="_blank" class="keywords">当前页面</a>弹出的窗口。 <br><code>postMessage()</code> <a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>接收两个参数:一条消息和<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>表示消息接收方来自哪个域的字符串。第二个参数对保障安全通信非常重要,可以防止浏览器把消息发送到不安全的地方。</p> <pre><code>//注意:所有<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a> XDM 的浏览器也<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a> iframe 的 conten<a href="https://www.jb51.cc/tag/twind/" target="_blank" class="keywords">twind</a>ow <a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a> var iframeWindow = document.getElementById("myframe").conten<a href="https://www.jb51.cc/tag/twind/" target="_blank" class="keywords">twind</a>ow; iframeWindow.postMessage("A secret","http://www.wrox.com");</code></pre> <p>最后一行<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>尝试向内嵌框架中发送一条消息,并指定框架中的文档必须来源于 "http://www.wrox.com" 域。如果来源匹配,消息会传递到内嵌框架中;否则,postMessage() 什么也不做。这一限制可以避免窗口中的位置在你不知情的情况下发生改变。如果传给 postMessage() 的第二个参数是 "*" ，则表示可以把消息发送给来自任何域的文档,但我们不推荐这样做。 </p> <p>接收到 XDM 消息时,会触发 window 对象的 message 事件。这个事件是以异步形式触发的,因此从发送消息到接收消息(触发接收窗口的 message 事件)可能要经过一段时<a href="https://www.jb51.cc/tag/jiande/" target="_blank" class="keywords">间的</a>延迟。 触发 message事件后,传递给 onmessage 处理程序的事件对象包含以下三方面的重要信息。</p> <ul> <li><p>data :作为 postMessage() 第<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>参数传入的字符串数据。</p></li> <li><p>origin :发送消息的文档所在的域,例如 "http://www.wrox.com" 。</p></li> <li><p>source :发送消息的文档的 window 对象的代理。这个代理对象主要用于在发送上一条消息的窗口中<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a> postMessage() <a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>。如果发送消息的窗口来自同<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>域,那这个对象就是window 。<br>接收到消息后验证发送窗口的来源是至关重要的。就像给 postMessage() <a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>指定第二个参数,以确保浏览器不会把消息发送给未知<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>一样,在 onmessage 处理程序中检测消息来源可以确保传入的消息来自已知的<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>。基本的检测模式如下。</p></li> </ul> <pre><code>EventUtil.addHandler(window,"message",function(event){ //确保发送消息的域是已知的域 if (event.origin == "http://www.wrox.com"){ //处理接收到的数据 processMessage(event.data); //可选:向来源窗口发送回执 event<a href="https://www.jb51.cc/tag/so/" target="_blank" class="keywords">.so</a>urce.postMessage("Received!","http://p2p.wrox.com"); } });</code></pre> <p>还是要提醒大家,event<a href="https://www.jb51.cc/tag/so/" target="_blank" class="keywords">.so</a>urce 大多数情况下只是 window 对象的代理,并非实际的 window 对象。换句话说,不能通过这个代理对象访问 window 对象的其他任何信息。记住,只通过这个代理<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>postMessage() 就好,这个<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>永远存在,永远可以<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>。<br> # 原生拖放<br> # 媒体元素<br> # 历史状态管理</p><div class="topcard-tags"></div> </div> </div> </div> <!-- row end--> <div class="clearfix"></div> <!-- row --> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <div class="title"><h1>相关文章</h1></div><div class="list_con"> <img src="https://m.jb51.cc/res/2024/09-25/18/879e7ec08a36083a57dfc8b44214469d.gif" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4742335.html" title="自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗">自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗</a> </div> <div class="summary">前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为l...</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2024/09-25/18/84bd76d88488cafdfb2789b5a991fecf.png" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4742334.html" title="nice-validator表单验证插件的简单使用">nice-validator表单验证插件的简单使用</a> </div> <div class="summary">前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2024/09-25/18/cf659cff914621d918c6072273c30973.gif" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4742333.html" title="基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现">基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现</a> </div> <div class="summary">前言 图片上传是web项目常见的需求，我基于之前的博客的代码...</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2024/09-25/18/02f80db4fdf55f3a24674e2854e018f2.png" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4742332.html" title="踹掉后端，前端导出Excel！">踹掉后端，前端导出Excel！</a> </div> <div class="summary">前言 导出Excel文件这个功能，通常都是在后端实现返回前端一...</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2024/09-25/18/db8dce1453ed09a8230451f2a9fcdc68.png" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4742331.html" title="Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量">Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量</a> </div> <div class="summary">前言 众所周知，js是单线程的，从上往下，从左往右依次执行，...</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2024/09-25/18/1cd1c972ce822d1a99b7d1b2c8f9cfcd.png" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4742330.html" title="select标签 禁止选择但又能通过序列化form表单传值到后台">select标签 禁止选择但又能通过序列化form表单传值到后台</a> </div> <div class="summary">前言 项目开发中，我们可能会碰到这样的需求：select标签，禁...</div> </div></div> </div> <!-- row end--> </div> </div> <footer id="footer"> <div class="container"> <div class="copyright"> Copyright © 2018 编程之家. 当前版本 V7.0.16<br> <span class="ml5">编程之家 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-8</a> </div> </div> </footer> <script src="https://m.jb51.cc/js/count.js"></script> </body> </html>
