在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. 软测试综述——PV操作

     在操作系统中,进程之间常常会存在相互排斥(都须要共享独占性资源时)和同步(完毕异步的两个进程的协作)两种关系.而信号量和PV操作完美有效的处理了这两种情况.     相互排斥:就好比过独木桥,一 ...

  2. PHP-5.5.10+Apache httpd-2.4.9在Windows系统下配置实战

    原文 PHP-5.5.10+Apache httpd-2.4.9在Windows系统下配置实战 环境配置:   程序准备: PHP windows版本下载地址: http://windows.php. ...

  3. 持续集成并不能消除 Bug，而是让它们非常容易发现和改正（转）

    互联网软件的开发和发布,已经形成了一套标准流程,最重要的组成部分就是持续集成(Continuous integration,简称 CI). 本文简要介绍持续集成的概念和做法. 一.概念 持续集成指的是 ...

  4. Babelfish (STL)

    题目描述 You have just moved from Waterloo to a big city. The people here speak an incomprehensible dial ...

  5. hdu-4419-Colourful Rectangle-段树区，并寻求

    这个问题很有趣的项目,写麻烦.它预计将有写了很长的时间. 好在,我想开了一个比较简单的方法.. . 使用位计算,颜色RGB分别1,2,4,代表. 状态的长度了. #include<stdio.h ...

  6. 利用缓存、Timer间隔时间发送微信的实例，很有用的例子

    //Class WechatOfferExcutor 此类为微信触发类,属于上层调用类,其中有用到用静态变量缓存offer信息,Task异步执行发送方法等 using Newtonsoft.Json. ...

  7. oracle_安装_win7+64位+Oracle+11g+64位下使用PLSQL+Developer+的解决办法

    1)安装Oracle 11g 64位 2)安装32位的Oracle客户端( instantclient-basic-win32-11.2.0.1.0) 下载instantclient-basic-wi ...

  8. KMP算法之从next[]到nextVal[]

    前些日子写了一篇KMP算法的博文,浅谈数据结构之KMP(串中的模式匹配算法),在这片文章中,谈到了一个模式串K值的记录数组 next[],详细可看那篇文章,其实,前面定义的next[]数组是有一定缺陷 ...

  9. 开源搜索引擎Iveely 0.8.0

    开源搜索引擎Iveely 0.8.0 这是一篇博客,不是,这是一篇开源人的心酸和喜悦,没有人可以理解我们的心情,一路的辛酸一路的艰辛,不过还好,在大家的支持下,总算是终见天日,谢谢那些给予我们无私帮助 ...

  10. 【转】Android 常用 adb 命令总结

    原文地址:http://testerhome.com/topics/2565 针对移动端 Android 的测试, adb 命令是很重要的一个点,必须将常用的 adb 命令熟记于心, 将会为 Andr ...