html5跨域数据传递(postMessage)
在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)的更多相关文章
- iframe跨域数据传递
项目中需要和其他单位合作开发,方案采用iframe嵌入页面,开发过程中设计到了跨域数据的传递,初步方案决定使用html5 API postMessage进行iframe跨域数据传递: 域名A下的页面 ...
- html5跨域通讯之postMessage的用法
转自:http://www.cnblogs.com/wshiqtb/p/3171199.html postMessagePortal.html 页面代码 <!DOCTYPE html> & ...
- 跨域信息传递postMessage
var sendToParent = function(event, data, listener) { var message = { event: event, data: data, liste ...
- ASP.Net中关于WebAPI与Ajax进行跨域数据交互时Cookies数据的传递
本文主要介绍了ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据传递的相关知识.具有很好的参考价值.下面跟着小编一起来看下吧 前言 最近公司项目进行架构调整,由原来的三层架构改 ...
- ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据的传递
前言 最近公司项目进行架构调整,由原来的三层架构改进升级到微服务架构(准确的说是服务化,还没完全做到微的程度,颗粒度没那么细),遵循RESTFull规范,使前后端完全分离,实现大前端思想.由于是初次尝 ...
- JSONP -- 跨域数据交互协议
一.概念 ①传统Ajax:交互的数据格式——自定义字符串或XML描述: 跨域——通过服务器端代理解决. ②如今最优方案:使用JSON格式来传输数据,使用JSONP来跨域. ③JSON:一种数据交换格式 ...
- Html5 跨域通信
H5 跨域通信: 在主页面中通过iframe嵌入外部页面,通过iframe的window对象postMessage方法向iframe页面传递消息. 1 <!DOCTYPE html> 2 ...
- JavaScript 跨域:window.postMessage 实现跨域通信
JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...
- 跨域通信--Window.postMessage()
一.跨源通信概述 源:协议.端口号(https默认值433).主机域名(document.domain) 作用:向目标窗口派发MessageEvent消息(四个属性) 兼容参考 MessageEven ...
随机推荐
- Java多线程中wait, notify and notifyAll的使用
本文为翻译文章,原文地址:http://www.journaldev.com/1037/java-thread-wait-notify-and-notifyall-example 在Java的Obje ...
- Android MenuItem 设置文本颜色-TextColor设置
前面一直在寻找 MenuItem文字颜色设置. 我发现API唯一的背景颜色设置. .. 因此,找到下面的方法.在OverFlow看到. 在onCreateOptionsMenu一下. 使MenuIte ...
- AngularJS 课程
AngularJS 教程(点我) AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 能够构建一个单一页面应用程序(SPAs:Single Page Application ...
- 在域信任环境中使用 Team Foundation Server (TFS 2013)
原文:在域信任环境中使用 Team Foundation Server (TFS 2013) 1. 用户情景和方案: XX公司的大部分软件产品通过软件外包的方式由开发商完成.为加强对软件开发的进度和质 ...
- 【iOS】MD5数据加密和网络安全
在做网络应用程序时,, 始终把确保用户数据的安全性, 因此要加密. MD5算法在国内用的非常多. MD5算法的特点: *相同的数据加密结果是一样的.(32个字符) *不可逆的.(不能逆向解密) *可 ...
- 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 ...
- Android经常使用的布局类整理(一)
Android经常使用的布局类整理 近期又回头做了一下android的项目,发觉越来越不从心,非常多东西都忘了,简单的页面布局也非常多写不出来,首先还是先整理一下一些会混淆的概念先 layout_wi ...
- jsScript中的一些操作方法
1.采用dom方式对script标签进行操作 var h = document.getElementsByTagName('HEAD').item(0); var s = document.creat ...
- unity3d NGUI入门(描述和使用插件参数)
我用NGUI它是3.5.4,Unity3d版本号是4.3.4f需要 NGUI3.5.4 下载NGUI,这是破解版的,用于学习.假设是商用.请支持正版 插件的导入 1.NGUI的导入,双击NGUI Ne ...
- Canvas旋转图片--保持相同大小的算法
function drawImg(angle) { canvas.width = canvas.width; var distance = size / 2 * Math.sqrt(2) ...