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

代码如下：数据发送页面

<!DOCTYPE HTML>

<html lang="en">

<head>

    <meta charset="utf-8"/>

    <meta name="copyright" content=""/>

    <meta name="keywords" content=""/>

    <meta name="description" content=""/>

    <title></title>

</head>

<body>

    <div class="color">

        <input type="text" value="" class="getColor"/>

        <input type="button" id="button" value="发送颜色" />

    </div>

     <iframe id="child" src="http://localhost/send/index.html" width="400" height="300"></iframe>

</body>

</html>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script>

    $(function(){

        $("#button").click(function(){

            var color = $(".getColor").val().toString();

            window.frames[0].postMessage(color,'http://localhost/send/index.html');

        });

    });

</script>

数据接收页面

<!DOCTYPE HTML>

<html lang="en">

<head>

    <meta charset="utf-8"/>

    <meta name="copyright" content=""/>

    <meta name="keywords" content=""/>

    <meta name="description" content=""/>

    <title></title>

</head>

<body>

    <div id="color" style="width:400px;height:200px;">

    </div>

</body>

</html>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script>

    $(function(){

        var color = $("#color");

            window.addEventListener('message',function(e){

                var s_color=e.data;

                color.css('background-color','#'+s_color);

            },false);

    });

</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. ubuntu安装jdk eclipse mysql等

    linux ubuntu下安装java web开发环境,需要安装包: jdk7 eclipse(选择java EE developer) apche-tomcat mysql(workbench可视化 ...

  2. 终结者:具体解释Nginx(一)

            相信非常多人都听过Nginx.这个小巧的东西能够和Apache及IIS相媲美. 那么它有什么作用呢?一句话.它是一个减轻Web应用server(如Tomcat)压力和实现Web应用se ...

  3. Codeforces Round #274 (Div. 2) B. Towers

    As you know, all the kids in Berland love playing with cubes. Little Petya has n towers consisting o ...

  4. php学习之道：mysql SELECT FOUND_ROWS()与COUNT(*)使用方法差别

    在mysql中 FOUND_ROWS()与COUNT(*)都能够统计记录.假设都一样为什么会有两个这种函数呢.以下我来介绍SELECT FOUND_ROWS()与COUNT(*)使用方法差别 SELE ...

  5. NGUI Example5 演示示例评论– lights and Refraction

     NGUI Example5 – lights and Refraction        NUI这个系统是在是牛.比unity3D里面自带的gui要好用得多.还能够为GUI加入法线贴图! 哈哈. ...

  6. UVA11080- Place the Guards(二分图染色)

    题目链接 题意:放最少的士兵去监视全部的道路, 但士兵不可相邻,符合的话,就输出最少的士兵数,否则输出-1 思路:事实上就是二分图染色,即黑白染色,然后选择黑白染色最少的那个颜色累加,但要注意可能有多 ...

  7. Oracle中使用Entity Framework 6.x Code-First

    Oracle中使用Entity Framework 6.x Code-First方式开发 去年写过一篇EF的简单学习笔记,当时EF还不支持Oracle的Code-First开发模式,今天无意又看了下O ...

  8. projecteuler----&gt;problem=34----Digit factorials

    Problem 34 145 is a curious number, as 1! + 4! + 5! = 1 + 24 + 120 = 145. Find the sum of all number ...

  9. 导入三方包，出现ClassNotFoundException

    在项目中须要引用settings模块里面的某个活动.在eclipse中导入settins.jar包之后,使用例如以下方式启动: Intent intent = new Intent(); intent ...

  10. 一个JavaWeb项目开发总结

    一.学会如何读一个JavaWeb项目源代码 步骤:表结构->web.xml->mvc->db->spring ioc->log->代码 先了解项目数据库的表结构,这 ...