[ Frontend ] 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" onclick="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" onclick="SendMessage()" />
40         </p>
41     </div>
42 </body>
43 </html>

3、附上源码

Download

作者：文道
出处：http://www.cnblogs.com/VincentDao
关于作者：北漂猴子一枚
本文版权归作者文道所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接
如有问题，可以通过邮件my_interface@126.com联系我，非常感谢。