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. JavaScript day3（运算符）

    运算符(operator) 基本运算符: 算术运算符用于执行变量之间的算术运算,给定 y=5: 运算符 描述 例子 结果 + 加 x=y+2 x=7 - 减 x=y-2 x=3 * 乘 x=y*2 x ...

  2. 【解题报告】 洛谷 P3492 [POI2009]TAB-Arrays

    [解题报告] 洛谷 P3492 [POI2009]TAB-Arrays 这题是我随机跳题的时候跳到的.写完这道题之后,顺便看了一下题解,发现只有一篇题解,所以就在这里顺便写一个解题报告了. 首先当然是 ...

  3. springcloud(四)：Eureka客户端公共组件打包方式

    ,      一.前言  各位大佬应该知道,在大型项目中都需要有数据传输层,一般项目都采用的是MVC结构,如果有10个表,则会创建10个实体类,在各个层之间应该使用实体类传递数据: 在微服架构中,也许 ...

  4. 【[Offer收割]编程练习赛13 C】 一人麻将

    [题目链接]:http://hihocoder.com/problemset/problem/1503 [题意] [题解] 一直在纠结如果没胡的话要扔掉哪一个麻将; 但其实可不用扔的,全部存起来就好了 ...

  5. noip模拟赛 fateice-shop

    题目背景 紫女,韩国歌舞坊(实为刺客组织)紫兰轩之主,千娇百媚,美艳无方.武艺高强且极有谋略胆识,精通奇石药物,冶炼之术及制毒用毒之术独步天下,真实姓名与来历无人知晓,只因总是身着一袭紫衣,所以众人以 ...

  6. 子序列 NYOJ （尺取法+队列+hash） （尺取法+离散化）

    子序列 时间限制:3000 ms  |  内存限制:65535 KB 难度:5   描述 给定一个序列,请你求出该序列的一个连续的子序列,使原串中出现的所有元素皆在该子序列中出现过至少1次. 如2 8 ...

  7. Android：隐藏ActionBar

    在OnCreate函数中添加:getActionBar().hide();

  8. Linux 大规模请求server连接数相关设置

    一般一个大规模Linuxserver请求数可能是几十万上百万的情况.须要足够的连接数来使用,所以务必进行对应的设置. 默认的Linuxserver文件描写叙述符等打开最大是1024.用ulimit - ...

  9. 《简明Python编程》核心笔记(1~5章)

    2014年8月20日 <简明Python编程>核心笔记  (1~5章) 昨天和今天两天时间里.把<简明Python编程>这一本书学完了,包含书上的代码.现把核心笔记记录下来,以 ...

  10. 01背包--小P寻宝记——粗心的基友

    题目描写叙述 这对好基友他们在经历无数的艰难险阻后.最终找到了宝藏.无奈的是这一对好基友居然是一样的粗心,又忘记了带一个大一点的包包,可惜啊..选择又出现了啊.. 已知包的体积是v,每种宝贝仅仅有一种 ...