一.为什么需要使用postMessage这个跨域技术

对于一个普通的页面而言，如果页面中的数据量太多时，会导致某个页面的数据量太多 二显得特别的臃肿，所以通常是使用iframe的方式来加载子页面，但是我们使用了iframe来加载子页面后，通常又涉及到子页面与父页面直接的信息的交替，比如我的父页面中有许多的功能时，会导致页面中的表单、表格、对话框（dialog）就很多，我们通常会将某些它们单独的分配到其他的子页面中去，如添加表单，但是当我们的表单添加功能，父页面是显示数据库中的数据同时包含了添加的数据，这时如果想要我的子页面中的表单提交后，我的父页面中的表格也相对的进行刷新同步时，我们就涉及到了子页面和父页面之间的信息的交互问题，这时我们通常是使用postMessage来进行交互。

二、使用postMessage常用的步骤

　　1、在父页面添加监听

　　//事件监听

window.addEventListener('message',function(e){
      var mes = e.data;
      alert(mes);
     if(mes == "app_refresh"){
       mediaTableObj.refresh();
   }
 },false);

　　2、在子页面中当完成某个操作后进行交互中发送消息

　　//发送消息　

　　window.parent.postMessage("app_refresh",'*');

三、具体的实例

A、父页面：

!DOCTYPE html>

<html>
　　<head>
　　　　<title>Post Message</title>
　　</head>
　　<body>
　　　　<div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
　　　　　　<div id="color">Frame Color</div>
　　　　</div>
　　　　<div>
　　　　　　<iframe id="child" src="test2.html"></iframe>
　　　　</div>

<script type="text/javascript">
　　window.addEventListener('message',function(e){
　　　　var color=e.data;
　　　　console.log(e);
　　　　document.getElementById('color').style.backgroundColor=color;
　　},false);
</script>
</body>
</html>

B、子页面

<!doctype html>

<html>
　　<head>
　　<style type="text/css">
　　　　html,body{
　　　　　　height:100%;
　　　　　　margin:0px;
　　　　}
　　</style>
　　</head>
　　<body style="height:100%;">
　　　　<div id="container" onclick="changeColor();" style="widht:100%; height:100%; background-color:rgb(204, 102, 0);">
　　　　　　click to change color
　　　　</div>

　　</body>
　　<script type="text/javascript">
　　　　var container=document.getElementById('container');
　　　　function changeColor () {
　　　　　　var color=container.style.backgroundColor;
　　　　　　if(color=='rgb(204, 102, 0)'){
　　　　　　　　color='rgb(204, 204, 0)';
　　　　　　}else{
　　　　　　　　color='rgb(204,102,0)';
　　　　　　}
　　　　　　container.style.backgroundColor=color;
　　　　　　window.parent.postMessage(color,'*');
　　　　}
　　</script>
</html>

PostMessager来对子父窗体进行跨域的更多相关文章

  1. 关于父窗口获取跨域iframe子窗口中的元素

    这几天在项目中遇到,一个难点, 就是需要异步加载一个pdf插件, 同时又需要获取这个插件中的点击事件来生成用户的下载记录. 刚开始也是想了很多方法,网上搜的 格式1:$("#iframe的I ...

  2. 父页面操作iframe子页面的安全漏洞及跨域限制问题

    一.父子交互的跨域限制 同域情况下,父页面和子页面可以通过iframe.contentDocument或者parent.document来交互(彼此做DOM操作等,如父页面往子页面注入css). 跨域 ...

  3. iframe 跨域调用父级方法的方案

    一.如果高层域名相同的话,可以通过document.domain来实现跨域访问 例如: 父级域名:localhost:8080 子级域名:localhost:9090 那么可以设置document.d ...

  4. 子页面iframe跨域执行父页面定义的JS方法

    问题需求:父页面与子页面iframe跨域嵌套,子页面要触发父页面所定义的js方法.父子页面的数据传递. 下文中会用到一些文件:父页面: parent.html嵌在父页面的子iframe页面:child ...

  5. iframe中子父页面跨域通讯

    目录 #跨域发送信息 #跨域接收信息 #示例Demo 在非跨域的情况下,iframe中的子父页面可以很方便的通讯,但是在跨域的情况下,只能通过window.postMessage()方法来向其他页面发 ...

  6. HTML5笔记：跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  7. HTML5窗口间同域和跨域的通信

    一丶同域下的 1.如果我们要操作iframe里面的元素,首先获取到引入的页面的window.获取iframe里面的window对象. var oIframe=getElementsByTagName( ...

  8. 浅谈WEB跨域的实现（前端向）

    同源策略/SOP(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS.CSFR等攻击(可以参考我的这篇文章). SOP要求 ...

  9. html5 postMessage解决iframe跨协议跨域通信问题

    a.html有个iframe载入b.com/login.html,当login完成时通知a.html页面登录完成并传递UserName 1.a.html 监听消息 window.addEventLis ...

随机推荐

  1. cellular neural networks（CNN）原理以及应用

    一.CNN的原理 1.CNN的思想: (1)借鉴了hopfield神经网络和CA a.hopfield的非线性动力学(主要是用于优化问题,比如旅行商问题等NP问题),Hopfield的能量函数的概念, ...

  2. iOS开发UI篇—控制器的创建

    iOS开发UI篇—控制器的创建 说明:控制器有三种创建方式,下面一一进行说明. 一.第一种创建方式(使用代码直接创建) 1.创建一个空的IOS项目. 2.为项目添加一个控制器类. 3.直接在代理方法中 ...

  3. codeforces 451E Devu and Flowers

    题意:有n个瓶子每个瓶子有 f[i] 支相同的颜色的花(不同瓶子颜色不同,相同瓶子花视为相同) 问要取出s支花有多少种不同方案. 思路: 如果每个瓶子的花有无穷多.那么这个问题可以转化为  s支花分到 ...

  4. mybatis进阶

    1.mybatis一对一映射 Student--Card <?xml version="1.0" encoding="utf-8" ?> <! ...

  5. Android 命令管理项目

    今天介绍一下Android怎么用命令管理项目,用命令管理Android项目需要用到Android命令,首先介绍一下用Android命令创建新项目,打开命令提示窗口,导航到Android SDK 的to ...

  6. MFC学习笔记（一）向模态对话框传递数据

    声明构造函数为2个参数,具有默认参数的参数须放在后面. CDialogDimmer::CDialogDimmer(CString name,CWnd* pParent /*=NULL*/) : CDi ...

  7. sql中replace函数与like结合达到提换的效果

    create table ts ( idd varchar() , co1 varchar() , co2 varchar() , co3 varchar() , gai varchar() ); i ...

  8. OrCAD搭建Access数据库

    刚进入到一个小公司,接到的第一个电路设计的案子是从零开始的,辛苦就不说,关键是这么不严谨,容易出错,于是乎,问题来了,能否从零开始着手建立个类似于以前公司的数据库,管理原理图封装,PCB封装及规格书! ...

  9. OD调试篇11

    先看看今天这道菜是用什么语言写的 发现是用VC7.0写的,再随便打开看看 发现未注册以及使用限制,那就用OD载入吧 右击查找所有字符串,找unregistered    找到后双击进入 我们会看见一个 ...

  10. FatMouse' Trade_贪心

    Problem Description FatMouse prepared M pounds of cat food, ready to trade with the cats guarding th ...