html5跨域数据传递（postMessage）

时间：2022-01-09 03:09:46

在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&period;Net中关于WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

    本文主要介绍了ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据传递的相关知识.具有很好的参考价值.下面跟着小编一起来看下吧 前言 最近公司项目进行架构调整,由原来的三层架构改 ...

  5. ASP&period;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&period;postMessage 实现跨域通信

    JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...

  9. 跨域通信--Window&period;postMessage&lpar;&rpar;

    一.跨源通信概述 源:协议.端口号(https默认值433).主机域名(document.domain) 作用:向目标窗口派发MessageEvent消息(四个属性) 兼容参考 MessageEven ...

随机推荐

  1. Salesforce开发者学习笔记之一&colon;基本知识

    本文介绍了Salesforce开发平台的基本知识, 包括如下内容: Salesforce平台介绍 Salesforce基本术语 定制和扩展Salesforce平台 创建一个简单的应用程序 Salesf ...

  2. Redis时延问题分析及应对

    Redis时延问题分析及应对 Redis的事件循环在一个线程中处理,作为一个单线程程序,重要的是要保证事件处理的时延短,这样,事件循环中的后续任务才不会阻塞: 当redis的数据量达到一定级别后(比如 ...

  3. js操作数组的一些小技巧

    1.从数组中随机获取成员 var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119]; var  rando ...

  4. Guava学习笔记：Range

    在Guava中新增了一个新的类型Range,从名字就可以了解到,这个是和区间有关的数据结构.从Google官方文档可以得到定义:Range定义了连续跨度的范围边界,这个连续跨度是一个可以比较的类型(C ...

  5. cocopods的安装和使用

  6. webapp设计注意事项

    色彩设计 美学相关的知识(色彩构成.平面构成等等)我就不再赘述了,相信从事此类行业的人员无人不知无人不晓了.这里简要说说WebApp设计中,色彩以及构图的特别之处吧. 首先是色彩.从事过广告和印刷业设 ...

  7. TCP粘包拆包问题

    阿π 专注于网络协议,系统底层,服务器软件 C++博客 | 首页 | 发新随笔 | 发新文章 | | | 管理 Socket粘包问题 这两天看csdn有一些关于socket粘包,socket缓冲区设置 ...

  8. C&plus;&plus; sizeof 误区 大公司面试题

    1.C++ 无成员变量和函数的类型的实例,求该实例的sizeof? 答:是1.(不是0) 2.如果在题1的基础上有1个成员变量,sizeof是(1+成员变量的大小)吗? 答:不是,是成员变量的大小. ...

  9. Nuxt 2 即将来临

    原文出处: 

  10. gradle 的jar下载到哪里了

    很好奇 gradle 的jar下载到哪里了,好顿翻,原来在C:\Users\(你的用户名)\.gradle\caches\modules-2\files-2.1目录下,使用gradle引用lib会先查 ...

相关文章