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、附上源码