在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. Java多线程中wait, notify and notifyAll的使用

    本文为翻译文章,原文地址:http://www.journaldev.com/1037/java-thread-wait-notify-and-notifyall-example 在Java的Obje ...

  2. Android MenuItem 设置文本颜色-TextColor设置

    前面一直在寻找 MenuItem文字颜色设置. 我发现API唯一的背景颜色设置. .. 因此,找到下面的方法.在OverFlow看到. 在onCreateOptionsMenu一下. 使MenuIte ...

  3. AngularJS 课程

    AngularJS 教程(点我) AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 能够构建一个单一页面应用程序(SPAs:Single Page Application ...

  4. 在域信任环境中使用 Team Foundation Server (TFS 2013)

    原文:在域信任环境中使用 Team Foundation Server (TFS 2013) 1. 用户情景和方案: XX公司的大部分软件产品通过软件外包的方式由开发商完成.为加强对软件开发的进度和质 ...

  5. 【iOS】MD5数据加密和网络安全

    在做网络应用程序时,, 始终把确保用户数据的安全性, 因此要加密. MD5算法在国内用的非常多.  MD5算法的特点: *相同的数据加密结果是一样的.(32个字符) *不可逆的.(不能逆向解密) *可 ...

  6. Android ADT Bundle(Eclipse with ADT) ADT R23

    ADT Bundle Platform Package Size MD5 Checksum Windows 32-bit adt-bundle-windows-x86-20140624.zip 377 ...

  7. Android经常使用的布局类整理(一)

    Android经常使用的布局类整理 近期又回头做了一下android的项目,发觉越来越不从心,非常多东西都忘了,简单的页面布局也非常多写不出来,首先还是先整理一下一些会混淆的概念先 layout_wi ...

  8. jsScript中的一些操作方法

    1.采用dom方式对script标签进行操作 var h = document.getElementsByTagName('HEAD').item(0); var s = document.creat ...

  9. unity3d NGUI入门(描述和使用插件参数)

    我用NGUI它是3.5.4,Unity3d版本号是4.3.4f需要 NGUI3.5.4 下载NGUI,这是破解版的,用于学习.假设是商用.请支持正版 插件的导入 1.NGUI的导入,双击NGUI Ne ...

  10. Canvas旋转图片--保持相同大小的算法

     function drawImg(angle) {     canvas.width = canvas.width; var distance = size / 2 * Math.sqrt(2) ...