H5 跨域通信：

在主页面中通过iframe嵌入外部页面，通过iframe的window对象postMessage方法向iframe页面传递消息。

 1 <!DOCTYPE html>

 2 <html>

 3     <head>

 4         <meta charset="UTF-8">

 5         <title>跨域通信示例</title>

 6         <script type="text/javascript">

 7             function hello(){

 8                 var iframe = document.getElementById("iframe").contentWindow;

 9                 iframe.postMessage("hello, 这是主页面传过来的数据", "http://localhost/html5/b.html");

10             }

11         </script>

12     </head>

13     <body>

14         <h1>跨域通信示例</h1>

15         <iframe width="400" src="http://localhost/html5/b.html" onload="hello()" id="iframe">

16         </iframe>

17     </body>

18 </html>

iframe页面中通过对窗口对象的message事件进行监听，以获取消息。

 1 <!DOCTYPE html>

 2 <html>

 3     <head>

 4         <meta charset="UTF-8">

 5         <script type="text/javascript">

 6             window.addEventListener("message", getEvent, false);

 7             function getEvent(event){

 8                 alert("从" + event.origin + "那里传递过来的信息是:\n" + event.data);

 9             }

10         </script>

11     </head>

12     <body>

13         iframe 页面

14     </body>

15 </html>

作者：qqyumidi

出处：qqyumidi的博客--http://www.cnblogs.com/lwbqqyumidi/

您的支持是对博主最大的鼓励，感谢您的认真阅读。

本文版权归作者所有，欢迎转载，但请保留该声明。

Html5 跨域通信的更多相关文章

  1. 利用HTML5的window.postMessage实现跨域通信

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp77   HTML5的window.postMessage简述 postM ...

  2. 使用HTML5 的跨域通信机制进行数据同步

    离线应用系统的设计目标就是在网络离线情况下依然可以操作我们的应用系统,并在网络畅通的情况下与服务器进行数据交互. 所以离线应用系统最终会做成类似C/S架构的客户端应用程序.这边基于Chrome或者 S ...

  3. html5 postMessage解决iframe跨协议跨域通信问题

    a.html有个iframe载入b.com/login.html,当login完成时通知a.html页面登录完成并传递UserName 1.a.html 监听消息 window.addEventLis ...

  4. JavaScript 跨域：window.postMessage 实现跨域通信

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

  5. 【JavsScript】父子页面之间跨域通信的方法

    由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...

  6. 【JavaScript】父子页面之间跨域通信的方法

    由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...

  7. 使用window.postMessage实现跨域通信

    JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: document.domain+iframe的设置,应用于主域相同而子域不同: 利用iframe和locati ...

  8. iframe跨域通信方案

    概述 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么 ...

  9. web跨域通信问题解决

    Web页面的跨域问题产生原因是企图使用JS脚本读写不同域的JS作用域.问题根源来自JavaScript的同源策略:出于安全考虑,Javascript限制来自不同源的web页面JS脚本之间进行交互.否则 ...

随机推荐

  1. 一个现代化的JSON库Moshi针对Android和Java

    Moshi 是一个现代化的JSON库针对Android和Java.它可以很容易地解析JSON成Java对象: String json = ...; Moshi moshi = new Moshi.Bu ...

  2. udp开发-dtd验证,dom解析

    //博主太懒了,并没有提供范例程序 6.基于UDP开发 (1)发送方:socket->准备数据包 DatagramSocket docket = new DatagramSocket(); // ...

  3. 1.shell之搭建Shell编程环境

    第一次写博客,加点废话,学习linux有一段时间,随着学习的深入发现自己学的不够系统,特别是遇到一些莫名的问题时,我只有各种百度,运气好时能解决掉,差时到现在还没解决,就算解决了还是不清楚是怎么解决的 ...

  4. IT牛人博客

    IT牛人博客,参见:http://blog.csdn.net/freebird_lb/article/details/8210276 团队技术博客 淘宝UED淘宝用户体验团队 淘宝核心系统淘宝核心系统 ...

  5. Fragment碎片频繁来回切换的时候报java.lang.IllegalStateException: No activity

    出现这个问题的原因是因为使用的transcation.replace(fragmentTwo);的方式进行碎片切换的. 解决方案是使用add和show.hide方法组合实现碎片的切换(应该是显示.隐藏 ...

  6. java strtus2 DynamicMethodInvocation配置入门 " ! "访问action里面的方法

    这里来讲解一下strtus2动态配置的用法. 配置之后不用通过 <action method="">去配置调用的具体方法. 第一:web.xml <?xml ve ...

  7. Discuz!nt整合心得

    最近研究了下Discuz!nt的整合,因为是网上找的实例,有个地方的写错了,导致纠结了一整天,这里分享出来. Discuz!nt提供了整合工具DiscuzToolkit,用于调用Discuz!nt A ...

  8. Dom操作--全选反选

    我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路:首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那我 ...

  9. javascript 将多维数组转换为一维数组

    /** * 2013年9月去面试的时候,有面试过这样子一道题目: * 题目是这样子的:将一个多维数组转换成一维数组并返回该数组,类似 * [1,2,3,[4,5,6,[7,8]],9]转换后为:[1, ...

  10. Cogs 1008. 贪婪大陆(树状数组)

    贪婪大陆 难度等级 ★★ 时间限制 1000 ms (1 s) 内存限制 128 MB 测试数据 10 简单对比 输入文件:greedisland.in 输出文件:greedisland.out 简单 ...