在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. FPGA图案--数字表示(代码+波形)

    在数字逻辑系统,仅仅存在高低.所以用它只代表一个整数数字.并且有3代表性的种类.这是:原码表示(符号加绝对值值).反码表示(加-minus标志)而补码(符号加补).这三个在FPGA中都有着广泛的应用. ...

  2. navicat如何导入sql文件

    工具--数据的传输--文件 版权声明:本文博客原创文章,博客,未经同意,不得转载.

  3. java设计模式：观察者模式

    package Observer; public class Test { /** * client测试类别 * 观察者模式一般由四部分组成: * 1摘要观察员(教科书被称为一般"Subje ...

  4. 如何解决卸载McAfee时出现“处于托管模式时无法删除”问题(转)

    问题现象: 这几天在为客户终端换装杀毒软件时出现这么一个问题:在控制面板的添加或删除程序里面将“McAfee VirusScan Enterprise和 McAfee AntiSpyware Ente ...

  5. .NET单元测试艺术(2) - 第一个单元测试

    List 2.1 使用[SetUp]和[TearDown]特性 using System; using System.Collections.Generic; using System.Linq; u ...

  6. 【ORACLE】使用数据泵的生产环境impd,expdp数据迁移

    ********************************************** ** 原文: blog.csdn.net/clark_xu  徐长亮专栏 **************** ...

  7. js 通信

    js 页面间的通信 看了一下公司原来的代码,原页面ajax post返回一个页面完整的HTML,然后再打开一个新页面并输出ajax返回的所有代码到新页面上,在新页面上以表单提交的形式实现重定向. 任凭 ...

  8. 什么时候rootViewController至tabbarController时刻,控制屏幕旋转法

    于ios6后,ios系统改变了屏幕旋转的方法,假设您想将屏幕旋转法,在需求rootvc里面制备,例如 UIViewController *viewCtrl = [[UIViewController a ...

  9. POJ 3013 Big Christmas Tree(最短Dijkstra+优先级队列优化，SPFA)

    POJ 3013 Big Christmas Tree(最短路Dijkstra+优先队列优化,SPFA) ACM 题目地址:POJ 3013 题意:  圣诞树是由n个节点和e个边构成的,点编号1-n. ...

  10. React.js终探（五）

    在React中,一切都是看做组件. 而组件的嵌套也是十分常见的. 所以有的组件就作为容器组件 容器组件 React元素可以包含子元素 如 //JSX <ezpanel title="t ...