一.为什么需要使用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. nginx root&alias文件路径配置

    转:https://www.ttlsa.com/nginx/nginx-root_alias-file-path-configuration/ 总结: alias 改变了访问路径.root对应loca ...

  2. /etc/passwd和/etc/shadow

    这两个路径分别是用于存储密码和隐形密码 让我们先来观察它,在了解它 [root@oc3408554812 ~]# cat /etc/passwd |grep carltoncarlton    :   ...

  3. 使用Dottrace跟踪代码执行时间

    当自己程序遇到性能问题,比如IIs请求反应缓慢,客户端程序执行缓慢,怎么分析是哪里出了问题呢?dottrace可以帮助.net程序跟踪出代码里每个方法的执行时间,这样让我们更清晰的看出是哪里执行时间过 ...

  4. Hadoop运行错误纪录

    问题1:Cannot run program "/bin/ls": error=11, Resource temporarily unavailable 15/04/22 14:4 ...

  5. 配置Entity Framework连接Sql Server出现的一个异常

    异常:The Entity Framework provider type 'System.Data.Entity.SqlServer.SqlProviderServices, EntityFrame ...

  6. android 第一个程序的编写

    移通152余继彪 需求分析:输入两个数字,让他们相乘,然后得出结果 首先建立一个android项目 在 layout中建立第一个界面 该界面有四个组件,两个editText 一个TextView,一个 ...

  7. 删除ubuntu旧版本内核

    方法一: 1.查看系统下可使用的内核有哪些 dpkg --get-selectiongs|grep linux-image liming@CM:~$ dpkg --get-selections|gre ...

  8. Android Studio下SQLite数据库的配置与使用（完）

    一,AS开发app用,所用的数据库有限制,必须使用较小的SQLite(MySql和Sql Server想想就不显示) 但是该数据库并不需要我们单独下载,安装的SDK中已经有了,在C:\AndroidS ...

  9. UE4 异步资源加载

    http://blog.csdn.net/pizi0475/article/details/48178861 http://blog.sina.com.cn/s/blog_710ea1400102vl ...

  10. html table动态合并单元格 js方法

    <script> $(document).ready(function(){ function mc(tableId, startRow, endRow, col) { var tb = ...