web通信之跨文档通信 postMessage】的更多相关文章

index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>web通信之跨文档通信</title> <style> iframe {float:left;width:45%; height:200px; bor…
HTML5 规范中,提出了XDM,又称为 跨文档消息传递,其核心是 postMessage()方法,进行跨域和跨文档消息传递,示例如下: <div class="CrossDocumentMessage"> Cross Document Message , core---->postMessage()</div> <iframe id="frame_corssDM" src="http://localhost:63342…
window.postMessage 1.浏览器兼容情况:IE8+.chrome.firefox等较新浏览器都至此. 2.使用方法: a.otherWindow.postMessage( message, targetOrigin); otherWindow iframe属性中的对象或者window.open打开的窗口 message 要发送的信息 targetOrigin 限定消息的发送范围,如果不限制,使用“*” b.监听message事件的触发 $(window).on("message&…
跨域通信HTML5提供了XDM(cross-document message)安全简单接口:   核心是 postMessage()方法,用来向另一个地址传送信息: var iframeWindow = document.getElementById(“myframe”).contentWindow;                 //note: all browsers that support XDM also support iframe contentWindow  iframeWin…
什么是iframe HTML内联框架元素 <iframe> 表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中. <iframe id="inlineFrameExample" title="Inline Frame Example" width="300" height="200" src="https://www.openstreetmap.org/export/embed.htm…
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.html * 作者:常轩 * 微信公众号:Worldhello * 完成日期:2016年11月2日 * 版本号:V1.0 * 程序输入:无 * 程序输出:见运行结果 */ Web 通信新技术 --跨文档信息传输 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"…
跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息.例如,www.w3cmm.com域中的一个页面与一个位于内嵌框架中的p2p.w3cmm.com域中的页面通信.在XDM机制出现之前,更稳妥地实现这种通信需要花很多功夫.XDM把这种机制规范化,让我们能既稳妥有简单地实现跨文档通信. XDM的核心是postMessage()方法.在HTML5规范中,除了XDM部分之外的其它部分也会提到这个方法名,但都是为了同一个目的:向另一个…
在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM.如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum域名中的页面通信.在XDM机制出现之前,要毫无压力地实现这种通信需要用很长时间.XDM把这种机制规范化,让咱们能够既稳妥又简单地实现跨文档通信. XDM的核心是postMessage()方法.对于XDM而言,”另一个地方”指的是包含在当前页面中的iframe标签,或者有当前页面弹出的窗口. post…
在项目中有应用到不同的子项目,通过不同的二级域名实现相互调用功能.其中一个功能是将播放器作为单独的二级域名的请求接口,其他项目必须根据该二级域名调用播放器.最近需要实现视频播放完毕后的事件触发,调用父窗口中的回调方法.普通的javascript很难实现跨域请求和调用的操作.通过jsonp方式实现起来复杂.不过通过Html的postMessage和onMessage可以轻松实现以上功能. postmessage方法 postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以…
对窗口对象的message事件进行监听 window.addEventListener("message", function(event) { // 处理程序代码 }, false); 使用window对象的postMessage()方法向其他窗口发送消息,该方法的定义如下: otherwindow.postMessage(message, targetOrigin); 该 方法使用两个参数:第一个参数为所发送的消息文本,但也可以是任何JavaScript对象(通过JSON转换对象为…