zoukankan      html  css  js  c++  java
  • [ 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联系我,非常感谢。

  • 相关阅读:
    [转载]试着解析宾得为何不出全幅
    [转载]试着解析宾得为何不出全幅
    [转载]从KX、KR用户的购镜选择谈到K5和其他
    [转载]从KX、KR用户的购镜选择谈到K5和其他
    pdf工具的使用
    Xshell 添加快速命令使用
    linux remove和 rename函数使用
    linear correlation coefficient|Correlation and Causation|lurking variables
    SST|SSR|SSE| r 2|与Sx x &Sx y & Syy的关系|
    the least-squares criterion|Sxx|Sxy|Syy|Regression Equation|Outliers|Influential Observations|curvilinear regression|linear regression
  • 原文地址:https://www.cnblogs.com/VincentDao/p/2892466.html
Copyright © 2011-2022 走看看