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 ...
随机推荐
- 【python】详解numpy库与pandas库axis=0，axis= 1轴的用法
对数据进行操作时,经常需要在横轴方向或者数轴方向对数据进行操作,这时需要设定参数axis的值: axis = 0 代表对横轴操作,也就是第0轴: axis = 1 代表对纵轴操作,也就是第1轴: nu ...
- Django - 内容总结(1)
内容整理: 1.创建django工程名称 django-admin startproject 工程名 2.创建app cd 工程名 python manage.py startapp cmdb 3.静 ...
- copy.c实现
#cat copy.c #include <stdio.h> #include <stdlib.h> #include <string.h> int copyFil ...
- 【css】最近使用的两种图标字体库
## 0. 前言 比较基础的图标加载:<img src="x.png">和块元素的背景background: url(./x.png). 页面多图标时,使用雪碧图(多个 ...
- odoo 权限杂记
最近做一个任务督办模块,涉及到一些权限问题,折磨了几天,终于是解决了. 任务表中关联了hr_employee,分别有默认字段创建人,Many2one的发布人.监督人和Many2many类型的主责人,这 ...
- [luoguP1816] 忠诚（st表 || 线段树）
传送门 其实我就是想练练 st表 本以为学了线段树可以省点事不学 st表 了 但是后缀数组中用 st表 貌似很方便 所以还是学了吧,反正也不难 ——代码 #include <cstdio> ...
- Element 'dependencies' cannot have character[children],because the type's content type is elemen
问题描述: Element 'xxxxxxx' cannot have character [children],because the type's content type is element- ...
- [转]十五天精通WCF——第十天 学会用SvcConfigEditor来简化配置
我们在玩wcf项目的时候,都是自己手工编写system.serviceModel下面的配置,虽然在webconfig中做wcf的服务配置的时候,vs提供大多 数的代码提示,但对于不太熟悉服务配置的小鸟 ...
- install pip 回顾
在install pip的时候遇到如下问题 1. yum install 想安装一个package 总是提示没有package 可以安装. 但是后来可以了 2. make 和 configure 到底 ...
- [转]supervisor 安装、配置、常用命令
原文: http://www.cnblogs.com/xueweihan/p/6195824.html ------------------------------------------------ ...