H5 postMessage跨文档消息传递

视频课堂https://edu.csdn.net/course/play/7621

父页面

<!DOCTYPE html>
<html><frameset cols="40%,60%"><frame src="a.html" /><frame src="b.html" /></frameset>
</html>

包含的两个子页面a.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-1.8.3.min.js"></script></head><body><form><input type="text" required="required" autofocus="autofocus" /><br /><input type="submit" value="提交" id="btn"/></form><script>$("#btn").click(function(){var message=$("input[type='text']").val();window.parent.frames[1].postMessage(message,'*');});</script></body>
</html>

包含b.html页面

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-1.8.3.min.js"></script></head><body><div id="message">尚未收到消息哦</div><script>var msgHandle=function(e){$("#message").html("信息："+e.data);}if(window.addEventListener){window.addEventListener("message",msgHandle,false);}else if(window.attachEvent){window.attachEvent('onmessage',msgHandle);}</script></body>
</html>

H5 postMessage跨文档消息传递相关推荐

JavaScript HTML5脚本编程——“跨文档消息传递”的注意要点
跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息.例如,www.wrox.com域中的一个页面与一个位于内嵌框架中的p2p.w ...
window.postMessage跨文档通信
window.postMessage 1.浏览器兼容情况:IE8+.chrome.firefox等较新浏览器都至此. 2.使用方法: a.otherWindow.postMessage( messag ...
HTML5 跨文档消息传输
对窗口对象的message事件进行监听 window.addEventListener("message", function(event) {//处理程序代码 },false); ...
同域下跨文档通信iframe和window.open
1.iframe标签可以嵌套另一个标签,并且可以通过js去访问被包含的页面的window对象,从而操作该页面下documentElement,如下: <!DOCTYPE HTML> < ...
HTML5新特性之跨文档消息传输
1.同域限制所谓"同域限制"是指,出于安全考虑,浏览器只允许脚本与同样协议.同样域名.同样端口的地址进行通信. 2.window.postMessage方法浏览器限制不同窗口( ...
postMessage - 跨域消息传递
window.postMessage() 方法允许来自一个文档的脚本可以传递文本消息到另一个文档里的脚本,而不用管是否跨域.一个文档里的脚本还是不能调用在其他文档里方法和读取属性,但他们可以用这种消息 ...
java根据pdf模板生成pdf_Java 复制、压缩PDF文档
在日常办公中,掌握操作PDF文档的能力尤为重要.在前文中我使用Java程序来演示过如何合并和拆分PDF文档.本文将介绍如何复制和压缩文档.通常复制文档有两种形式,一种是跨文档复制,即将一个文档复制到另 ...
Word2013中怎样设置同一文档内粘贴选项
在用户编辑或者书写Word文档时,经常碰到需要将前面已经输入过的某一段文字拷贝粘贴到后面中的情况.用户可以根据实际工作需要预设粘贴格式的类型,可以大大减轻操作上的复杂. 在Word 2013文档中,用 ...
python写word表格_使用表格—— 使用Python读写Office文档之三
本文介绍使用Python在Word中创建一个表格,以及读取表格中的数据. =============================================================== ...

H5 postMessage跨文档消息传递

H5 postMessage跨文档消息传递相关推荐

最新文章

热门文章