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. [JS]window.location获取url各项参数详解

    window.location方法后还还可以带href,search等参数,下面我们来看看获取url各项参数的办法. URL即:统一资源定位符 (Uniform Resource Locator, U ...

  2. ansible - playbook(剧组)

    目录 ansible - playbook(剧组) 常用命令 五种传参方式 常用元素详解 tags handlers template when 循环 嵌套循环 ansible - playbook( ...

  3. Git下的标签

    发布一个版本时,我们通常先在版本库中打一个标签(tag),这样,就唯一确定了打标签时刻的版本.将来无论什么时候,取某个标签的版本,就是把那个打标签的时刻的历史版本取出来.所以,标签也是版本库的一个快照 ...

  4. 【codeforces 515A】Drazil and Date

    [题目链接]:http://codeforces.com/contest/515/problem/A [题意] 每次只能走到相邻的四个格子中的一个; 告诉你最后走到了(a,b)走了多少步->s ...

  5. H5音乐播放器

    前段时间无聊用JavaScript基于H5的audio写一个音乐播放器.误喷,技术有限,文笔不好之处希望各位大神海涵. 1.HTML代码: <div id="music" c ...

  6. 垂直相邻margin合并解决方法

    块级元素的垂直相邻外边距会合并,水平边距永远不会重合. 行内元素实际上不占上下外边距,左右外边距也不会合并.浮动元素的外边距也不会合并. 外边距重叠的意义 外边距的重叠只产生在普通流文档的上下外边距之 ...

  7. mybatis源码阅读-MappedStatement各个属性解析过程(八)

    调用方 类org.apache.ibatis.builder.xml.XMLMapperBuilder private void configurationElement(XNode context) ...

  8. 通过JS的事件处理取得radio的值

    转自:http://blog.sina.com.cn/s/blog_50a1e17401017pik.html 提前知识准备: 在一个HTML文档中,每个元素都可以设置ID和NAME属性. 其中ID属 ...

  9. [PWA] Show Notifications when a Service Worker is Installed or Updated

    Service Workers get installed and activated in the background, but until we reload the page they don ...

  10. Xposed获取微信usernamepassword

    请关注我的微信公众号 參考文章:Xposed恶意插件 Android 安全专项-Xposed 劫持usernamepassword实践 0x00 我在之前的文章中演示了一下怎样通过Xposed获取us ...