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. Android(java)学习笔记164:Relativelayout相对布局案例

    我们看看案例代码,自己心领神会: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout ...

  2. wins和linux 系统不同编码格式导致的.py执行问题: bad interpreter: No such or file directory

    我在win7上用IDLE编写了一个python文件(MyTopo.py),但是用putty传到VM中的ubuntu系统中,用 ./MyTopo方式执行. 显示: /bin/sh^M: bad inte ...

  3. Spring整合JMS(一)——基于ActiveMQ实现

    1.1     JMS简介 JMS的全称是Java Message Service,即Java消息服务.它主要用于在生产者和消费者之间进行消息传递,生产者负责产生消息,而消费者负责接收消息.把它应用到 ...

  4. Qt Quick 简单教程 - 1 (代码备忘)

    qmlscene 未安装 由于出现上面的情况,我开始转战Windows 下学习,昨天安装好了Qt Sdk了,哟吼吼吼. mail.qml内容: import QtQuick 2.3 import Qt ...

  5. MVC小系列(十六)【在控制器级别或具体Action级别上动态设定模板页(Layout)】

    方法就是使用:ActionFilterAttribute它的几个方法:OnActionExecuted,OnActionExecuting,OnResultExecuted和OnResultExecu ...

  6. Ios 给imageview 添加手势没有反应

    道理差不多,简单写写,就是给UIImage所在的UIImageView添加个单击的手势,让用户点击图片时有响应的响应. 有人用个透明的UIButton,感觉有时候不方便.   - (void)view ...

  7. IOS如何刷新视图上的显示内容

    大家都知道,UItableView 有个 reloadData的方法,可以tableview刷新视图.而普通的View上面.我们如何刷新视图的呢? 下图是我做的一个用户登录之后显示用户昵称和个性签名还 ...

  8. OC与Swift的区别二(常量、变量、运算符)

    4.常量与变量声明 oc的变量声明使用  类型 变量名 = 变量值的方式,其中类型为系统内置数据类型或自定义类型,变量名需由英文字母开头且不能包含特殊字符 swift变量声明使用 var 变量名 = ...

  9. javascript 获取url参数

    /** window.location.search获取url地址?以后的值 获取url参数有两种方法,第一种如下,第二种是通过正则 */ //基本版 function getParam() { va ...

  10. 关于C++对汉字拼音的处理——终结篇

    以前写过了3个博文,都是关于汉字转拼音的,后来发现都不是很“完美”的解决方案,第一个和第二个利用的unicode编码的范围进行确定汉字的拼音,但是难免有遗漏,这个在后面的实践中发现的,后来第三个方法是 ...