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. swift 再识枚举变量

    // Use enum to create an enumeration. Like classes and all other named types, enumerations can have ...

  2. php第十二节课

    练习 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  3. 三、Scrapy中选择器用法

    官方示例源码<html> <head>  <base href='http://example.com/' />  <title>Example web ...

  4. 6.3.2 使用struct模块读写二进制文件

    使用 struct 模块需要使用 pack() 方法吧对象按指定个数进行序列化,然后使用文件对象的write方法将序列化的结果写入二进制文件:读取时需要使用文件对象的read()方法读取二进制文件内容 ...

  5. 【微软2017年预科生计划在线编程笔试 A】Legendary Items

    [题目链接]:https://hihocoder.com/problemset/problem/1489 [题意] 每轮游戏; 你一开始有p的概率获得超神标记; 如果这轮游戏你没获得超神标记; 那么你 ...

  6. 利用Linux中的crontab实现分布式项目定时任务

    @Controller @RequestMapping("/task/topic") public class TopicQuartzController { protected ...

  7. Leetcode 41.缺失的第一个正数

    缺失的第一个正数 给定一个未排序的整数数组,找出其中没有出现的最小的正整数. 示例 1: 输入: [1,2,0] 输出: 3 示例 2: 输入: [3,4,-1,1] 输出: 2 示例 3: 输入: ...

  8. （38）Spring Boot分布式Session状态保存Redis【从零开始学Spring Boot】

    [本文章是否对你有用以及是否有好的建议,请留言] 在使用spring boot做负载均衡的时候,多个app之间的session要保持一致,这样负载到不同的app时候,在一个app登录之后,而访问到另外 ...

  9. [NOIP2016day2T1] 組合數問題(problem)

    题目描述 组合数C(n,m)表示的是从n个物品中选出m个物品的方案数.举个例子,从(1,2,3) 三个物品中选择两个物品可以有(1,2),(1,3),(2,3)这三种选择方法.根据组合数的定 义,我们 ...

  10. 20180620关于使用xtrabackup热还原数据库

    参看:http://www.cnblogs.com/waynechou/p/xtrabackup_backup.html http://www.cnblogs.com/waynechou/p/xtra ...