在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. 7 Ways to earn money on programming(转)

    英文原文:7 Ways to earn money on programming 几个星期前,当我收到一个自称 Someone712 的人发给我的一条消息时,我决定要写一篇如何用编程赚钱的博客文章.S ...

  2. STL 源代码分析 算法 stl_algo.h -- pre_permutation

    本文senlie原版的,转载请保留此地址:http://blog.csdn.net/zhengsenlie pre_permutation ------------------------------ ...

  3. SQL Server表分区详解

    原文:SQL Server表分区详解 什么是表分区 一般情况下,我们建立数据库表时,表数据都存放在一个文件里. 但是如果是分区表的话,表数据就会按照你指定的规则分放到不同的文件里,把一个大的数据文件拆 ...

  4. ASP.NET MVC：Razor 引入命名空间

    原文:ASP.NET MVC:Razor 引入命名空间 页面中引用 c# @using MvcApplication83.Models @using MvcApplication83.Common 行 ...

  5. 错误 4 自定义工具错误: 无法生成服务引用“DepartMentService”的代码。请检查其他错

    原文:错误 4 自定义工具错误: 无法生成服务引用"DepartMentService"的代码.请检查其他错 问题:     错误 4 自定义工具错误: 无法生成服务引用" ...

  6. linux 下 apache启动、停止、重启命令

    原文:linux 下 apache启动.停止.重启命令 基本的操作方法: 本文假设你的apahce安装目录为/usr/local/apache2,这些方法适合任何情况 apahce启动命令: 推荐/u ...

  7. OCP读书笔记(22) - 题库(ExamB)

    101.Identify two situations in which you can use Data Recovery Advisor for recovery. (Choose two.) A ...

  8. android activity 后的形式 藏

    activity 希望的形式 于AndroidManifest.xml  建立 theme 属性 <activity             android:name="zicox.u ...

  9. hdu What Are You Talking About（map）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1075 map简单应用 代码: #include <stdio.h> #include &l ...

  10. MessageDigest简要

    本文博客原 參考文章:http://blog.sina.com.cn/s/blog_4f36423201000c1e.html 一.概述 java.security.MessageDigest类用于为 ...