window.postMessage跨文档通信】的更多相关文章

window.postMessage 1.浏览器兼容情况:IE8+.chrome.firefox等较新浏览器都至此. 2.使用方法: a.otherWindow.postMessage( message, targetOrigin); otherWindow iframe属性中的对象或者window.open打开的窗口 message 要发送的信息 targetOrigin 限定消息的发送范围,如果不限制,使用“*” b.监听message事件的触发 $(window).on("message&…
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(cross-document message)安全简单接口:   核心是 postMessage()方法,用来向另一个地址传送信息: var iframeWindow = document.getElementById(“myframe”).contentWindow;                 //note: all browsers that support XDM also support iframe contentWindow  iframeWin…
一.基本原理 HTML5为了解决跨域,引入了跨文档通信API(Cross-document messaging).这个API为window对象新增了一个window.postMessage方法,允许跨窗口通信,不论这两个窗口是否同源.Internet Explorer 8+, chrome,Firefox , Opera和Safari 都支持这个功能. 二.测试步骤 1.创建a.html <!DOCTYPE html> <html lang="en"> <…
什么是iframe HTML内联框架元素 <iframe> 表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中. <iframe id="inlineFrameExample" title="Inline Frame Example" width="300" height="200" src="https://www.openstreetmap.org/export/embed.htm…
跨文档消息传送(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()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以…
HTML5 规范中,提出了XDM,又称为 跨文档消息传递,其核心是 postMessage()方法,进行跨域和跨文档消息传递,示例如下: <div class="CrossDocumentMessage"> Cross Document Message , core---->postMessage()</div> <iframe id="frame_corssDM" src="http://localhost:63342…
对窗口对象的message事件进行监听 window.addEventListener("message", function(event) { // 处理程序代码 }, false); 使用window对象的postMessage()方法向其他窗口发送消息,该方法的定义如下: otherwindow.postMessage(message, targetOrigin); 该 方法使用两个参数:第一个参数为所发送的消息文本,但也可以是任何JavaScript对象(通过JSON转换对象为…
*/ * 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"…
HTML5定义了一些javascript API,其中有一个就是跨文档消息传递(cross-document-messaging简称XDM). 现在XDM已经作为一个规范独立了出来,名字为:Web Messaging   项目地址为:http://dev.w3.org/html5/postmsg/ XMD核心就是postMessage()方法,这个方法接受两个参数一个是需要传送的字符串,第二个是接收方的域的字符串. 第二个参数可以控制一定的安全性,如果把第二个参数设置为"*",那么就是…
一.文档间的通信 postMessage对象 //不跨域 1.iframe:obj.contentWindow [iframe中的window对象] iframe拿到父级页面的window: parent(上一层window) top(最顶层window) 2.window.open() 返回值是新窗口的window对象 拿到父级window : window.opener //跨域 3. 目标域的window.postMessage("xxx","目标域"); 目…
同源通信 执行它们的页面位于具有相同的协议(http/https),端口(80/443),主机(通常为域名) 时,这两个脚本才能相互通信 大多数情况下,网站就是内部的域名,所以是同源通信,可以相互访问 非同源通信 不同域名,不同窗口,内嵌iframe(可能是外部域名地址) 这种就是非同源通信, window.postMessage() 方法可以安全地实现跨源通信 来自H5 api,没想到吧,h5还有个这样的方法*.* 语法 otherWindow.postMessage(message, tar…
window.postMessage() 方法可以安全地实现跨域通信.通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数 Document.domain设置为相同的值) 时,这两个脚本才能相互通信.window.postMessage() 方法提供了一种受控机制来规避此限制,只要正确的使用,这种方法就很安全. 一.安装live-server 要想实现跨窗口通信,必须要在服务器上运行,直接用浏览…
新标准中提供了文档之间直接的消息传输API.而且不限制跨域消息传递! 发送消息使用的是Window对象的postMessage(data,targetURL)方法就可以了,但给哪个window对象发送消息,就使用哪个window的实例来调用,注意这个细节. 文档默认监听一下message事件就可以接受消息了:window.addEventListener("message", function (ev) {}); 监听消息事件:ev两个重要属性:ev.source指向发送消息的源win…
worker概述 worker基本使用 window下的postMessage worker多线程的应用 一.worker概述 web worker实际上是开启js异步执行的一种方式.在html5之前有事件.定时器.http请求三种异步机制,js本身并不能主动将一块代码使用异步的方式执行,worker的出现填补了js在非事件.定时器.http请求的情况下可以主动开启js代码的异步执行.worker有自己独立的线程,并非像前面三个异步机制那样的回调函数.所以,worker线程一旦建立成功,就会始终…
1.同域限制 所谓“同域限制”是指,出于安全考虑,浏览器只允许脚本与同样协议.同样域名.同样端口的地址进行通信. 2.window.postMessage方法 浏览器限制不同窗口(包括iFrame窗口)之间的通信,除非两个窗口装载的是同一个域名下的网页.window.postMessage方法就是为了解决这个问题而特定的API,可以让不同域名的窗口互相通信. postMessage方法的格式如下: targetWindow.postMessage(message, targetURL[, tra…
验证a .b两点疑惑: a.<script src="./main.js"></script>中的window.onload是在html全部加载完了才执行,还是其在html中所处位置之前的加载完就执行? b. <script src="./main.js"></script>中window.onload有和没有 的区别是什么? 结论: a. answer:在html全部加载完了才执行. b. answer:区别就是,w…
JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: document.domain+iframe的设置,应用于主域相同而子域不同: 利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限 Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要在同一客户端就行,跨应用程序, 可以跨域. window.name 保存数据以及跨域 iframe 静态代理动态传输方案,充…
一.浏览器同源策略 首先我们需要了解一下浏览器的同源策略,关于同源策略可以仔细看看知乎上的一个解释.传送门 总之:同协议,domain(或ip),同端口视为同一个域,一个域内的脚本仅仅具有本域内的权限,可以理解为本域脚本只能读写本域内的资源,而无法访问其它域的资源.这种安全限制称为同源策略. ( 现代浏览器在安全性和可用性之间选择了一个平衡点.在遵循同源策略的基础上,选择性地为同源策略"开放了后门". 例如img script style等标签,都允许垮域引用资源.) 下表给出了相对 …
在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.html页面引入B.html页面,下面看看A.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head>…
在HTML5中新增了postMessage方法,postMessage可以实现跨文档消息传输(Cross Document Messaging),Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage. 该方法可以通过绑定window的message事件来监听发送跨文档消息传输内容. 1. postMessage是HTML5 XMLHttpRequest Level 2中的API,且是为数不多可以跨域操作…
说明 window.postMessage()方法可以安全地实现Window对象之间的跨域通信.例如,在一个页面和它生成的弹出窗口之间,或者是页面和嵌入其中的iframe之间. 通常情况下,不同页面上的脚本允许彼此访问,当且仅当它们源自的页面共享相同的协议,端口号和主机(也称为“同源策略”).window.postMessage()提供了一个受控的机制来安全地规避这个限制(如果使用得当的话). 一般来说,一个窗口可以获得对另一个窗口的引用(例如,通过targetWindow=window.ope…
本文将介绍通过Java程序来复制PDF页面,包括: 跨文档复制,即从文档1复制到文档2 在同一文档内复制,即从页面A复制到页面B 使用工具:Free Spire.PDF for Java (免费版) Jar文件获取及导入方法: 方法1:可通过官网下载jar文件包.下载后,解压文件,并将lib文件夹下的Spire.Pdf.jar文件导入到Java程序.参考如下导入效果:(这里程序将jar文件分别导入了两个module) 方法2:可通过maven仓库安装导入. Java代码示例 [示例1]跨文档复制…
1. $(function(){...}); 文档树加载完执行的方法:(注意:不包括图片.css.js等文件): 一个页面中可以有多个$(function(){...}); 方法: 两种写法: //第一种 $(document).ready(function(){ ... }) //第二种(第一种的简写) $(function(){ ... }); 2. $(window).onload(function(){...}); 文档树及其所有文件加载完之后执行的方法(所有文件加载完,eg:图片.js…
JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 otherWindow.postMessage(message, targetOrigin); 2 3 otherWindow 4 其他窗口的一个引用,比如iframe的contentWindow属性.执行window.open返回的窗口对象.或者是命名过或数值索引的window.frames. 5 6 m…
详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp77   HTML5的window.postMessage简述 postMessage是html为了解决跨域通信,特别引入的一个新的API,目前支持这个API的浏览器有:Firefox, IE8+, Opera, Safari, Chrome.postMessage允许页面中的多个iframe/window的通信,postMessage也可以实现ajax直接跨域,不通过服…
一.跨源通信概述 源:协议.端口号(https默认值433).主机域名(document.domain) 作用:向目标窗口派发MessageEvent消息(四个属性) 兼容参考 MessageEvent四个属性: 1.message(类型) 2.data(window.postMessage的第一个参数) 3.origin(调用postMessage时页面的当前状态) 4.source(调用postMessage的窗口信息) 二.postMessage语法: otherWindow.postMe…
NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript的相互通信 如何处理NanUI中的下载过程 - DonwloadHandler的使用(待更新...) 如何处理NanUI中的弹窗过程 - LifeSpanHandler的使用(待更新...) 如何控制Javascript对话框 - JsDialogHandler的使用(待更新...) 自定义资源处理程序 (待更新...) 如何实现C#与J…