在html5中有个支持跨域传递的方法postMessage，可是实现iframe之间的数据传递！

代码如下：数据发送页面

  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <meta name="copyright" content=""/>
  6.     <meta name="keywords" content=""/>
  7.     <meta name="description" content=""/>
  8.     <title></title>
  9. </head>
  10. <body>
  11.     <div class="color">
  12.         <input type="text" value="" class="getColor"/>
  13.         <input type="button" id="button" value="发送颜色" />
  14.     </div>
  15.      <iframe id="child" src="http://localhost/send/index.html" width="400" height="300"></iframe>
  16. </body>
  17. </html>
  18. <script type="text/javascript" src="js/jquery.min.js"></script>
  19. <script>
  20.     $(function(){
  21.         $("#button").click(function(){
  22.             var color = $(".getColor").val().toString();
  23.             window.frames[0].postMessage(color,'http://localhost/send/index.html');
  24.         });
  25.     });
  26. </script>

数据接收页面

  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <meta name="copyright" content=""/>
  6.     <meta name="keywords" content=""/>
  7.     <meta name="description" content=""/>
  8.     <title></title>
  9. </head>
  10. <body>
  11.     <div id="color" style="width:400px;height:200px;">
  12.     </div>
  13. </body>
  14. </html>
  15. <script type="text/javascript" src="js/jquery.min.js"></script>
  16. <script>
  17.     $(function(){
  18.         var color = $("#color");
  19.             window.addEventListener('message',function(e){
  20.                 var s_color=e.data;
  21.                 color.css('background-color','#'+s_color);
  22.             },false);
  23.     });
  24. </script>

当在发送页面改变颜色值的时候，嵌入的iframe的页面背景色直接就被修改了，效果很好！

html5跨域数据传递（postMessage）的更多相关文章

  1. iframe跨域数据传递

    项目中需要和其他单位合作开发,方案采用iframe嵌入页面,开发过程中设计到了跨域数据的传递,初步方案决定使用html5 API postMessage进行iframe跨域数据传递: 域名A下的页面 ...

  2. html5跨域通讯之postMessage的用法

    转自:http://www.cnblogs.com/wshiqtb/p/3171199.html postMessagePortal.html 页面代码 <!DOCTYPE html> & ...

  3. 跨域信息传递postMessage

    var sendToParent = function(event, data, listener) { var message = { event: event, data: data, liste ...

  4. ASP.Net中关于WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

    本文主要介绍了ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据传递的相关知识.具有很好的参考价值.下面跟着小编一起来看下吧 前言 最近公司项目进行架构调整,由原来的三层架构改 ...

  5. ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

    前言 最近公司项目进行架构调整,由原来的三层架构改进升级到微服务架构(准确的说是服务化,还没完全做到微的程度,颗粒度没那么细),遵循RESTFull规范,使前后端完全分离,实现大前端思想.由于是初次尝 ...

  6. JSONP -- 跨域数据交互协议

    一.概念 ①传统Ajax:交互的数据格式——自定义字符串或XML描述: 跨域——通过服务器端代理解决. ②如今最优方案:使用JSON格式来传输数据,使用JSONP来跨域. ③JSON:一种数据交换格式 ...

  7. Html5 跨域通信

    H5 跨域通信: 在主页面中通过iframe嵌入外部页面,通过iframe的window对象postMessage方法向iframe页面传递消息. 1 <!DOCTYPE html> 2 ...

  8. JavaScript 跨域：window.postMessage 实现跨域通信

    JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...

  9. 跨域通信--Window.postMessage()

    一.跨源通信概述 源:协议.端口号(https默认值433).主机域名(document.domain) 作用:向目标窗口派发MessageEvent消息(四个属性) 兼容参考 MessageEven ...

随机推荐

  1. 一个关于Linux Bridge配置的吐嘈

    话说有些事情十分适合在放假前的一天折腾一天,但绝对不适合在你准备去吃饭前多看一眼...我上周就碰到了这么一件揪心的事,终于以低血糖收场.十分狼狈地四处觅食,却觅到了一包超级辣的鸡爪.吃完后感觉症状加重 ...

  2. 前端是Sencha Touch+ Cordova(转)

    从13年初开始,我的关注点一直在两个点上,一个是股票,一个是移动前端和大数据技术,互联网金融的发展会让互联网证券越来越火热,当然,我也希望将这两个关注点结合到一起,做一些事情.   现在,我的APP和 ...

  3. MVC 快速开发框架

    ASP.NET MVC 快速开发框架之 SqlSugar+SyntacticSugar+JQWidgetsSugar+jqwidgets jqwidgets.js: 是一个功能完整的框架,它具有专业的 ...

  4. Sonar相关汇总

    http://www.sonarqube.org/downloads/ http://docs.sonarqube.org/display/SONAR/Documentation/ 公司前段时间推动项 ...

  5. Lichee （六） 优化配置的微内核

    我们的分析<Lichee(二) 在sun4i_crane平台下的编译 >的时候.竟然没有一个步骤是在配置内核 make ARCH=arm menuconfig 细致的读过的代码的会发现,在 ...

  6. Linux网络编程——连接和面向连接的协议之间没有区别

    网络编程中最重要的概念就是连接取向(connection-oriented)和无连接(connectionless)协议.虽然本质.两者之间的区别是不难理解,编程的人来说,却是个非常easy混淆的问题 ...

  7. 使用Eclipse+Maven+Jetty构建Java Web开发环境(几个教程综合集成2014发行)

    工作需要使用Jetty由于web集装箱,得知Eclipse+Maven+Jetty该组合是非常好的,因此,要在网上找了很多教程,但不写或多或少特定的或过时的内容而导致最终的配置失败,易于配置为未来的同 ...

  8. Nyoj 虚拟的城市之旅(bfs)

    描述   展馆是未来城市的缩影,个人体验和互动是不变的主题.在A国展馆通过多维模式和高科技手段,引领参观者在展示空间踏上一段虚拟的城市之旅. 梦幻国有N个城市和M条道路,每条道路连接某两个城市.任意两 ...

  9. 词组缩写（isalpha()的应用）

    Problem Description 定义:一个词组中每个单词的首字母的大写组合称为该词组的缩写.比如,C语言里常用的EOF就是end of file的缩写.   Input 输入的第一行是一个整数 ...

  10. Log4j2 简明教程

    一.概述 log4j2官方文档内容非常多,要一次性了解全部是不可能的.正确的步骤应当是先了解最常见的配置,当发现原有知识无法解决问题,再重新查看文档看有没有合适的配置.下面将从文件结构入手,再到简单的 ...