[ Front-end ] Iframe 跨域双向通信

Iframe 通信相信大家都接触过，或者了解过，那么双向通信呢? :p

今天发了Code Review ，有点时间就重新整理了一下，希望能对大家有所帮助。

0、效果图

1、ParentHtml

1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head runat="server">
3     <title></title>
4     <script src="Js/jquery-1.7.2.min.js" type="text/javascript"></script>
5     <script type="text/javascript">
6 function SendMessage() {7             var Msg = $("#txtParent").val();8             var Iframe = document.getElementById("iframe1");9             Iframe.contentWindow.postMessage(String(Msg), "*");10 }11     </script>
12     <script type="text/javascript">
13         var OnMessage =function (e) {14             $("#lblParent").text(e.data);15 };16 function Init() {17             //for > ie 8
18             if(window.addEventListener) {19                 window.addEventListener("message", OnMessage, false);20 }21             //for <= ie 8
22             else{23                 if(window.attachEvent) {24                     window.attachEvent("onmessage", OnMessage);25 }26                 else{27                     alert("can not init event listener.");28                     return;29 }30 }31 };32 Init();33     </script>
34 </head>
35 <body>
36     <div>
37         <p>
38             接收到的信息：<label id="lblParent"></label>
39             <br />
40             <input type="text" id="txtParent" value="parent message" />
41             <input type="button" value="Send to Child" οnclick="SendMessage()" />
42         </p>
43         <p>
44             <iframe style="height: 400px;" id="iframe1" src="ChildHtml.aspx"></iframe>
45         </p>
46     </div>
47 </body>
48 </html>

2、ChildHtml

1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head id="Head1" runat="server">
3     <title></title>
4     <script src="Js/jquery-1.7.2.min.js" type="text/javascript"></script>
5     <script type="text/javascript">
6 function SendMessage() {7             var Msg = $("#txtChild").val();8             var Parent =window.parent;9             Parent.postMessage(String(Msg), "*");10 };11         var OnMessage =function (e) {12             $("#lblChild").text(e.data);13 };14 function Init() {15             //for > ie 8
16             if(window.addEventListener) {17                 window.addEventListener("message", OnMessage, false);18 }19             //for <= ie 8
20             else{21                 if(window.attachEvent) {22                     window.attachEvent("onmessage", OnMessage);23 }24                 else{25                     alert("can not init event listener.");26                     return;27 }28 }29 };30 Init();31     </script>
32 </head>
33 <body>
34     <div>
35         <p>
36             接收到的信息：<label id="lblChild"></label>
37             <br />
38             <input type="text" id="txtChild" value="child message" />
39             <input type="button" value="Send to Parent" οnclick="SendMessage()" />
40         </p>
41     </div>
42 </body>
43 </html>

3、附上源码

Download

转载于:https://www.cnblogs.com/VincentDao/archive/2013/02/05/2892466.html

[ Front-end ] Iframe 跨域双向通信相关推荐

用P3P header解决IE下iframe跨域访问时候session丢失的问题
用P3P header解决IE下iframe跨域访问时候session丢失的问题整合客户的登录时,或者其他一个网站通过iframe时,特别是一个http页面,访问一个https页面时,常常会sess ...
获取子页面iframe的点击事件及iframe跨域的交互
1.获取子页面iframe的点击事件 1.1.获取iframe var frame = document.getElementById('addrClick2'); 1.2.获取点击事件 var If ...
解决 Iframe跨域session 丢失问题
解决 Iframe跨域session 丢失问题参考文章: (1)解决 Iframe跨域session 丢失问题 (2)https://www.cnblogs.com/xumingxiang/arch ...
js解决iframe跨域问题
js解决iframe跨域问题参考文章: (1)js解决iframe跨域问题 (2)https://www.cnblogs.com/qinxuhui/p/12154995.html 备忘一下.
iframe跨域通信的通用解决方案-第二弹!（终极解决方案）
一年前,我发过一篇关于跨文档通信方案的文章<iframe跨域通信的通用解决方案>,提供了一种基于创建iframe与轮询window.name的方案. 一年后,很高兴地带来彻底改造的新版本. ...
怎样获取不同域名的ifram的html,AJAX | iframe跨域的实现方法
iframe跨域 HTML5学堂:本文当中我们介绍了跨域的基本知识,讲解到了跨域的相关种类,并讲解了解决跨域中的一种方法--如何使用iframe跨域.讲解了iframe跨域的基本原理与流程,并配以实战 ...
利用iframe跨域请求
跨域是系统与系统之间信息交流的一种方式,为了获取另外一个地方的信息,经常会出现跨域,总结一下利用iframe跨域进行请求,网上关于跨域的信息很多,只做一下备忘 <!DOCTYPE html> ...
利用代理页面解决html iframe跨域访问网站问题
原文:利用代理页面解决html iframe跨域访问网站问题源代码下载地址: http://www.zuidaima.com/share/1854884509142016.htm 在做项目的时候遇到 ...
Cookie 跨域解决方案（IFrame跨域）
IFrame跨域思路:假设有a.haorooms.com/text.html和b.haorooms.com/text.html两个页面,通过a.haorooms.com/text.html页面去修改b ...
iframe 跨域处理
iframe 跨域处理 <iframe src="demo.html" id="iframes"height="300"width=& ...

[ Front-end ] Iframe 跨域双向通信

[ Front-end ] Iframe 跨域双向通信相关推荐

最新文章

热门文章