一.为什么需要使用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. MVC 与 webform比较

    来自:http://www.cnblogs.com/xiaozhi_5638/p/4019065.html ASP.NET Webforms Behind Code的好处和存在的问题 ASP.NET ...

  2. linux下使用shell查看apache IP访问量

    1.查看TCP连接状态 netstat -nat |awk '{print $6}'|sort|uniq -c|sort -rn netstat -n | awk '/^tcp/ {++S[$NF]} ...

  3. sC#进阶系列——WebApi 接口参数不再困惑：传参详解

    原文:http://www.cnblogs.com/landeanfen/p/5337072.html 一.get请求 对于取数据,我们使用最多的应该就是get请求了吧.下面通过几个示例看看我们的ge ...

  4. PHP中file_put_contents追加时换行

    很多时候记录日志需要换行.不建议使用\r\n,因为:在windows中\r\n是换行在Mac中\r是换行在Liunx中\n是换行 但是PHP提供了一个常量来匹配不同的操作系统,即: file_put_ ...

  5. UISlider

    UISlider是iOS中的滑块控件 通常⽤于控制视频播放进度,控制⾳量等. 它继承于UIControl,滑块提供了⼀系列连续的值,滑块停 在不同的位置,获取到滑块上的值也不同.   minimumV ...

  6. Adaboost 2

    本文不定期更新.原创文章,转载请注明出处,谢谢. Adaboost是一种迭代算法,其核心思想是针对同一个训练集训练不同的分类器(弱分类器),然后把这些弱分类器集合起来,构成一个更强的最终分类器(强分类 ...

  7. [计算机、网络相关历史]unix简史

    本文2001年由台湾“网络农夫”所写,其人生平不祥,此文受鸟哥大力推崇,两人应该相识.文章写得很不错,应该是查了很多资料整理而成的,美中不足的是好多语句不通顺,国考语文绝对不及格,哈哈. 0.我的准备 ...

  8. wine install 32bit netframewok

    WINEARCH=win32 WINEPREFIX=~/.wine32 winecfg env WINEARCH=win32 WINEPREFIX=~/.wine32 winetricks dotne ...

  9. 升级设置win2008r2开发环境，遇到问题小结

    升级设置2008r2开发环境,是一般程序员经历的事情.许多从vs 2003,vs2005+sql2000+win2003过来,但是,时间推移,技术革新,64位的推行.架构的变化和强大.我们也只可以学习 ...

  10. C# 6.0新特性（转载）

    简介 VS 2015中已经包含C# 6.0. C#在发布不同版本时,C#总是会有新特性,比如C#3.0中出现LINQ,C#4.0中的动态特性,c#5.0中的异步操作等.. C# 6.0中与增加了不少新 ...