窗口之间通信类

Posted I am Daya, 爱生活,爱前端!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了窗口之间通信类相关的知识,希望对你有一定的参考价值。

通信方式有很多种:

  • ajax 不支持跨域通信(XMLHttpRequest2 其实标准的浏览器也是可支持跨域,只要后端设置一下头部也是可以跨域的,设置header(Access-Control-Allow-Origin: http://mywebdomain.com) 
  • webSocket  支持跨域通信
  • JSONP 支持跨域通信
  • PostMessage 支持跨域通信
  • CORS   支持跨域也支持同源, 是一个新的通信协议标准

 

跨域通信的几种方式
  • JSONP
  • Hash
  • postMessage
  • WebSocket
  • CORS
  • 借助nginx/Apache 。。。

 

今天先来看下窗口之间的通信方式:

一般窗口通信分为三种:

1. iframe嵌套:多个iframe之间通信。

  1. 父页面操作子页面元素:oFrame.contentWindow.document.body。
  2. 父页面调用子页面方法:oFrame.contentWindow.functionName()。
  3. 子页面调用父页面元素:window.top/parent/window

2. 用window.open()方法打开一个新的窗口。

 

  • 父页面操作子页面元素:window.open()打开子页面时,返回子页面窗口对象。
  • 子页面操作父页面元素:window.opener即为父窗口对象。

 

3. html5t提供的postMessage方法和message事件。(可以跨域通信)

  • postMessage():接收消息窗口对象.postMessage("发送的数据","接收的域"); 这里的域一定要带上协议
  • message事件:接收消息窗口监听message事件,事件对象中包含有origin属性和data属性。其中ev.origin可以获取发送数据的域,ev.data获取发送的具体数据。
  •  1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6     </head>
     7     <body>
     8         <iframe id="myFrame" src="http://localhost:63342/XChart/Iframe2.html" width="600px;"></iframe><br />
     9         <input type="button" value="向子窗口发送数据" id="btn" />
    10     </body>
    11 </html>
    12 <script type="text/javascript">
    13     window.onload = function(){
    14         var myFrame = document.getElementById("myFrame");
    15         var oBtn = document.getElementById("btn");
    16         
    17         oBtn.onclick = function(){
    18             myFrame.contentWindow.postMessage("testData","http://localhost:63342");
    19         }
    20     }
    21     function parentWindowHandler(){
    22         alert("这是父窗口的方法,可以被子窗口调用");
    23     }
    24 </script>
    postMessage
     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6     </head>
     7     <body>
     8         <p>http://localhost:63342/XChart/Iframe2.html</p>
     9     </body>
    10 </html>
    11 <script type="text/javascript">
    12     window.onload = function(){
    13         window.addEventListener("message",function(ev){
    14             alert("父窗口向子窗口发送的数据是:" + ev.data);
    15             alert("数据来源是:" + ev.origin);
    16         })
    17     }
    18 
    19 </script>
    View Code
    其中postMessage和Message可以实现跨域的窗口间的通信。
    以上内容欢迎大家提出疑问,有问题可以随意提出,共同进步,共同学习!!

以上是关于窗口之间通信类的主要内容,如果未能解决你的问题,请参考以下文章

Android:将片段和弹出窗口的点击事件中生成的变量传递给活动的方法

如何在嵌套片段内的两个子片段之间进行通信

片段和服务器之间的通信问题

与另一个片段通信的片段接口

在片段和活动之间进行通信 - 最佳实践

如何使用接口在片段和活动之间进行通信?