一.为什么需要使用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. MCU厂家

    新唐(nuvoton):http://www.nuvoton.com/义隆(emc):http://www.emc.com.tw/chs/遠翔(feeling):http://www.feeling- ...

  2. 解决ssh链接服务器超时自动断开的问题

    为了安全性:ssh默认的连接超时时间很短:经常就是发个呆就断开了:事实上是可以修改超时时间的. 示例环境: 服务器:centos6.5 1:[root@iZ28qa8jt4uZ /]cp /etc/s ...

  3. [转]深入理解Java 8 Lambda（类库篇——Streams API，Collectors和并行）

    以下内容转自: 作者:Lucida 微博:@peng_gong 豆瓣:@figure9 原文链接:http://zh.lucida.me/blog/java-8-lambdas-insideout-l ...

  4. 三层交换单臂路由vlan间通信综合实验之降龙要点[转]

    单臂路由三层交换机提供vlan间的通信之菜鸟之降龙详解要点: 图示 PC:左到右依次设置IP172.16.10.1,    20.1,  30.1,   40,1  ,50,1  /24 网关10.2 ...

  5. web相关概念

    1.web概念:web1.0:静态页面为主(传统企业的页面)特点:由网站提供方来更新和维护内容web2.0:以动态页面为主,以用户为中心,网站由用户参与或编辑web3.0:智能化人与人与机器的交流(各 ...

  6. centos 非可视化查看已安装的redis

    1. 2.

  7. pycharm的快捷方式

    PyCharm3.0默认快捷键(翻译的)1.编辑(Editing)Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Space 快速导入任意类Ctrl + Shift ...

  8. Leetcode 155 Min Stack 小顶堆+栈,优先队列实现 难度:0

    https://leetcode.com/problems/min-stack/ #include <vector> #include <queue> #include < ...

  9. ACM 矩阵题目整理

    先从最基础的矩阵快速幂加速递推开始. HDU 1005 Number Sequence |f[n-2],f[n-1]|* |0 B| =|f[n-1], B*f[n-2]+A*f[n-1]|=|f[n ...

  10. 当一个activity中按钮过多时怎么办？

    这几天看极客学院的视频,跟视频中的老师学到的一些小技巧~~ .setOnClickListener(this) 通过重写this(我猜的是重写),下面有onClicked() package exam ...