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的更多相关文章

  1. 跨文档消息传递----postMessage()

    HTML5 规范中,提出了XDM,又称为 跨文档消息传递,其核心是 postMessage()方法,进行跨域和跨文档消息传递,示例如下: <div class="CrossDocume ...

  2. window.postMessage跨文档通信

    window.postMessage 1.浏览器兼容情况:IE8+.chrome.firefox等较新浏览器都至此. 2.使用方法: a.otherWindow.postMessage( messag ...

  3. cross-document message 跨文档通信 HTML5

    跨域通信HTML5提供了XDM(cross-document message)安全简单接口:   核心是 postMessage()方法,用来向另一个地址传送信息: var iframeWindow ...

  4. HTML（六）HTML iframe 使用postMessage方法进行跨文档消息传递

    什么是iframe HTML内联框架元素 <iframe> 表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中. <iframe id="inlineFram ...

  5. Web 通信技术 ——跨文档信息传输(JavaScript)

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.html * 作者:常轩 * 微信公众号:Worldh ...

  6. HTML5中的跨文档消息传递

    跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息.例如,www.w3cmm.com域中的一个页面与一个位于内嵌框架中的p2p. ...

  7. HTML5实战与剖析之跨文档消息传递(iframe传递信息)

    在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM.如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum ...

  8. 通过Html5的postMessage和onMessage方法实现跨域跨文档请求访问

    在项目中有应用到不同的子项目,通过不同的二级域名实现相互调用功能.其中一个功能是将播放器作为单独的二级域名的请求接口,其他项目必须根据该二级域名调用播放器.最近需要实现视频播放完毕后的事件触发,调用父 ...

  9. HTML5 跨文档消息传输

    对窗口对象的message事件进行监听 window.addEventListener("message", function(event) { // 处理程序代码 }, fals ...

随机推荐

  1. vue自定义轻量级form表单校验

    遇到了form表单提交的需求,找了vue的组件觉得不够灵活,有时间自己写了一个. 调用方法 全局引入注册: import va from 'global/js/va' va.install(Vue); ...

  2. (C/C++学习)7.数组及其访问方式

    说明:数组的数据类型是一种构造类型,而存储数组的内存是一段连续的存储区域.数组的数据类型决定了连续内存的访问方式,它包括数组的三要素:起始地址.步长以及元素个数. 一.一维数组 1.形式:type 数 ...

  3. 第十三节：pandas之groupby（）分组

    1.Series()对象分组 1.1.单级索引 1.2.多级索引 2.DataFrame()对象分组 3.获取一个分组,遍历分组,filter过滤.

  4. [加强版] Codeforces 835D Palindromic characteristics (回文自动机、DP)

    题目链接: https://codeforces.com/contest/835/problem/D 题意: 一个回文串是\(1\)-回文的,如果一个回文串的左半部分和右半部分一样且都是\(k\)-回 ...

  5. 【codeforces 510A】Fox And Snake

    [题目链接]:http://codeforces.com/contest/510/problem/A [题意] 让你画一条蛇.. [题解] 煞笔提 [Number Of WA] 0 [完整代码] #i ...

  6. ubuntu添加开机自启和sysv-rc-conf

    此文ubuntu使用sysvinit,而非upstart UBUNTU添加开机自动启动程序方法 1. 开机启动时自动运行程序    Linux加载后, 它将初始化硬件和设备驱动, 然后运行第一个进程i ...

  7. [HEOI 2016] sort

    [HEOI 2016] sort 解题报告 码线段树快调废我了= = 其实这题貌似暴力分很足,直接$STL$的$SORT$就能$80$ 正解: 我们可以二分答案来做这道题 假设我们二分的答案为$a$, ...

  8. RDS for MySQL 通过 mysqlbinlog 查看 binlog 乱码

    问题描述: 使用 mysqlbinlog -vv mysql-bin.000110 查看 RDS mysql 二进制文件发现类似如下结果: BINLOG ' MgI+UA8BAAAAZwAAAGsAA ...

  9. 开源GIS软件 4

    空间数据操作框架 Apache SIS Apache SIS 是一个空间的框架,可以更好地搜索,数据聚类,归档,或任何其他相关的空间坐标表示的需要. kvwmap kvwmap是一个采用PHP开发的W ...

  10. Swift和Objective-C混合编程——Swift调用OC

    在iOS应用的开发中.Swift必将代替OC,两者的趋势是"短期共存,长期代替".但曾经有太多的代码是用OC语言完毕的,而Swift的开发也从 OC中继承了非常多的特性.两者也是有 ...