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. C# DataTable扩展方法

    在日常搬砖中,总结了一些简单的扩展方法. public static bool IsNullOrEmpty(this DataTable dt) { ; } public static bool Is ...

  2. ＢＦＳ入门篇——RQNOJ195&&335

    PID195 / 校园迷宫☆ 从x,y走到去q,w的最小步数,限制是有的点可走,有的点不可走,BFS嘛. #include<bits/stdc++.h> using namespace s ...

  3. centos 7.x 安装开源堡垒机Jumpserver

    环境 虚拟机 系统:centos 7 IP:192.168.168.8 目录:/opt 代理:nginx 数据库:mysql 版本大于等于 5.6    mariadb 版本大于等于 5.5.6 更新 ...

  4. node.js开发环境配置

    node.js是什么 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...

  5. BZOJ 1601 USACO 2008 Oct. 灌水

    [Description] Farmer John已经决定把水灌到他的n(1<=n<=300)块农田,农田被数字1到n标记.把一块土地进行灌水有两种方法,从其他农田饮水,或者这块土地建造水 ...

  6. Linux系统自带服务罗列

    /ect/services 文件列出了系统详细的服务 红色字体为常用服务 acpid ACPI(全称 Advanced Configuration and Power Interface)服务是电源管 ...

  7. C/C++ uchar的一个有趣用法

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51377490 图像处理中常常使用的一种 ...

  8. mysql参数设置与查看

    查看默认的参数设置(包含读取到的参数文件中的设置) mysqld --verbose --help   查看默认的参数设置(不包含参数文件中的设置) mysqld --no-defaults --ve ...

  9. Spring MVC REST 风格的 URL

    前言 本文主要内容为 REST 风格的 URL. REST REST(Representational State Transfer).(资源)表现层状态转化.它是一种架构风格,用 url 来访问网络 ...

  10. luogu2341 [HAOI2006]受欢迎的牛

    题目大意 每头奶牛都梦想成为牛棚里的明星.被所有奶牛喜欢的奶牛就是一头明星奶牛.所有奶牛都是自恋狂,每头奶牛总是喜欢自己的.奶牛之间的“喜欢”是可以传递的——如果A喜欢B,B喜欢C,那么A也喜欢C.牛 ...