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; border:1px solid #333;}
</style>
</head>
<body>
<div id="main">
<h1>web通信之跨文档通信</h1>
<iframe src="iframe1.html"></iframe>
<iframe src="iframe2.html"></iframe>
</div>
</body>
</html>
iframe1.html
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试iframe</title>
</head>
<body>
<div>
<form>
<input type="text" placeholder="随便写点什么"/>
<input type="submit" value="确认" />
</form>
</div>
<script>
var eleForm = document.querySelector("form");
eleForm.onsubmit = function() {
var message = document.querySelector("input[type='text']").value;
window.parent.frames[1].postMessage(message, '*');
return false;
}
</script>
</body>
</html>
iframe2
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试iframe</title>
<style>
</style>
</head>
<body>
<div id="message">
尚未接受到信息。
</div>
<script>
var eleBox = document.querySelector("#message");
var messageHandle = function(e) {
eleBox.innerHTML = '接受到的信息是:' + e.data;
};
window.addEventListener("message", messageHandle, false);
</script>
</body>
</html>
web通信之跨文档通信 postMessage的更多相关文章
- 跨文档消息传递----postMessage()
HTML5 规范中,提出了XDM,又称为 跨文档消息传递,其核心是 postMessage()方法,进行跨域和跨文档消息传递,示例如下: <div class="CrossDocume ...
- window.postMessage跨文档通信
window.postMessage 1.浏览器兼容情况:IE8+.chrome.firefox等较新浏览器都至此. 2.使用方法: a.otherWindow.postMessage( messag ...
- cross-document message 跨文档通信 HTML5
跨域通信HTML5提供了XDM(cross-document message)安全简单接口: 核心是 postMessage()方法,用来向另一个地址传送信息: var iframeWindow ...
- HTML(六)HTML iframe 使用postMessage方法进行跨文档消息传递
什么是iframe HTML内联框架元素 <iframe> 表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中. <iframe id="inlineFram ...
- Web 通信技术 ——跨文档信息传输(JavaScript)
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.html * 作者:常轩 * 微信公众号:Worldh ...
- HTML5中的跨文档消息传递
跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息.例如,www.w3cmm.com域中的一个页面与一个位于内嵌框架中的p2p. ...
- HTML5实战与剖析之跨文档消息传递(iframe传递信息)
在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM.如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum ...
- 通过Html5的postMessage和onMessage方法实现跨域跨文档请求访问
在项目中有应用到不同的子项目,通过不同的二级域名实现相互调用功能.其中一个功能是将播放器作为单独的二级域名的请求接口,其他项目必须根据该二级域名调用播放器.最近需要实现视频播放完毕后的事件触发,调用父 ...
- HTML5 跨文档消息传输
对窗口对象的message事件进行监听 window.addEventListener("message", function(event) { // 处理程序代码 }, fals ...
随机推荐
- Opencv学习之路—Opencv下基于HOG特征的KNN算法分类训练
在计算机视觉研究当中,HOG算法和LBP算法算是基础算法,但是却十分重要.后期很多图像特征提取的算法都是基于HOG和LBP,所以了解和掌握HOG,是学习计算机视觉的前提和基础. HOG算法的原理很多资 ...
- NOIp知识点复习——最短路计数
$Mingqi\_H$ NOIp 2017考挂了...gg 重新开始好了. 计划明年2月24号前复习完所有的NOIp知识点(毕竟很不熟练啊),之后到七月底前学习完省选的东西(flag?). 从现在开始 ...
- 三、Scrapy中选择器用法
官方示例源码<html> <head> <base href='http://example.com/' /> <title>Example web ...
- 观察者模式之Golang实现
观察者模式的具体概念原理,参见https://baike.baidu.com/item/%E8%A7%82%E5%AF%9F%E8%80%85%E6%A8%A1%E5%BC%8F/5881786?fr ...
- Django——4 模板标签 模板的继承与引用
Django 模板标签 常用标签 模板的继承与引用 模板标签 标签在渲染的过程中提供任意的逻辑 标签语法: 由%}和 {% 来定义的,例如:{%tag%} {%endtag%} 这个定义是刻意模糊的. ...
- JavaScript初步学习----基本使用,简单事件,修改样式,数据类型
JavaScript基本使用 JavaScript原名叫livescript,是一门动态类型,弱类型基于原型的脚本语言 用于页面特效,前后交替,后台开发(node) JavaScript写在s ...
- BUPT2017 springtraining(16) #2 ——基础数据结构
题目在这里 A.似乎是个并查集+??? B.10W的范围,似乎可以暴力来一发二分+sort? 但我猜正解可以O(nlogn)? C.单调队列入门题目 #include <cstdio> ] ...
- POJ - 3541 - Given a string…
Given a string… Time Limit: 10000MS Memory Limit: 65536K Total Submissions: 1819 Accepted: 390 C ...
- [tsA1490][2013中国国家集训队第二次作业]osu![概率dp+线段树+矩阵乘法]
这样的题解只能舔题解了,,,qaq 清橙资料里有.. #include <iostream> #include <cstdio> #include <cstdlib> ...
- [bzoj3450]Tyvj1952 Easy[概率dp]
和之前一样考虑这个音符时x还是o,如果是x,是否是新的连续一段,对答案的贡献是多少$(a^2-{(a-1)}^2)$,然后递推就可以了. #include <bits/stdc++.h> ...