JS如何實現瀏覽器通信

本文主要和大家分享JS如何實現瀏覽器通信，主要以程式碼形式，希望能幫助大家。

同源策略及限制

同源策略限制了從同一個來源載入的文件或腳本如何與來自另一個來源的資源互動。這是一個用於隔離潛在惡意檔案的重要安全機制。 （三相同：協定http/https，網域名稱和連接埠）

• Cookie/LocalStorage和IndexDB無法讀取

• DOM無法取得

• Ajax請求不能發送發送

##原因http://store.company.com/dir2/other.htmlhttp://store.company.com/dir/inner/another.html成功#https://store.company.com/secure.html失敗#不同協定( https與http )http://store.company.com:81/dir/etc.html失敗#不同連接埠( 81和80)http://news.company.com/dir/other.html失敗不同網域( news和store )

#URL

前後端如何溝通

• Ajax：在同源下通訊方式

• WebSocket：不限制同源策略

• CORS：支援跨域通信，也支援同源通信

如何建立Ajax

• XMLHttpRequest物件的工作流程

• 相容性處理

• 事件的觸發條件

• 的觸發順序

#方法說明JSONP動態建立 <script><tr>標籤，設定其src，回呼函數在src中設定,一定要有<td>callback=handleResponse函數，在頁面中，傳回的JSON作為參數傳入回呼函數中，我們透過回呼函數來操作資料。 <td>function handleResponse(response){// 對response資料進行操作碼}<tr><td>##Hash<td>Hash是url位址中#號之後的內容，其值改變不會觸發頁面刷新，search是url問號後面的，一旦改變會觸發刷新</script>

	##<pre class='brush:php;toolbar:false;'>var xht = XMLHttpRequest ? new XMLHttpRequest():new window.ActiveXObject(&amp;#39;Microsoft.XMLHTTP&amp;#39;);var data = opt.data, url = opt.url, type=opt.type.toUpperCase(), dataArr=[];for(var k in data){ dataArr.push(k+&amp;#39;=&amp;#39;+data[k]); }if(type === &amp;#39;GET&amp;#39;){ url = url + &amp;#39;?&amp;#39; + dataArr.join(&quot;&amp;&quot;); xhr.open(type, url.replace(/\?s/g,&amp;#39;&amp;#39;), true); xhr.send(); }if(type === &amp;#39;POST&amp;#39;){ xhr.open(type, url, true); xhr.setRequestHeader(&amp;#39;Content-type&amp;#39;,&amp;#39;application/x-www-form-urlencoded&amp;#39;); xhr.send(dataArr.join(&amp;#39;&amp;&amp;#39;)); } xhr.onload = function(){ if(xhr.status === 200 || xhr.status === 304){ //媒体资源需要206 var res; if(opt.success &amp;&amp; opt.success instanceof Function){ res = xhr.responseText; if(typeof res === &amp;#39;string&amp;#39;){ res = JSON.parse(res); opt.success.call(xhr, res); } } }else{ if(opt.error &amp;&amp; opt.error instanceof Function){ opt.error.call(xhr, res); } } }</pre>跨域通訊的幾種方式

#postMessage

window.postMessage() 方法可以安全地實現跨源通訊。通常，對於兩個不同頁面的腳本，只有當執行它們的頁面位於具有相同的協定（通常為https），連接埠號碼（443為https的預設值），以及主機 (兩個頁面的模數Document.domain當設定為相同的值) 時，這兩個腳本才能相互通訊。 window.postMessage() 方法提供了一種受控機制來規避此限制，只要正確的使用，這種方法就很安全。 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

WebSocket

不受同源策略影響https: //developer.mozilla.org/zh-CN/docs/Web/API/WebSocket############CORS######全名為」跨網域資源共用」（Cross-origin resource sharing）具體來說，就是在頭資訊之中，增加一個Origin欄位。 Origin欄位用來說明，本次請求來自哪個來源（協定 + 網域 + 連接埠）。 ###############Hash詳解：###

// 利用Hash，场景是当前页面A通过iframe或者frame嵌入了跨域页面B//A中伪代码如下：var B = document.getElelementByTagName('iframe');
B.src = B.src + '#' + 'data';// B中伪代码window.onhashchange = function(){
    var data = window.location.hash;
}

###postMessage###

// 窗口A(http://A.com)向跨域的窗口B(http://B.com)发送信息window.postMessage(data, "http://B.com");()//在窗口监听window.addEventListener('message', function(event){
    console.log(event.origin)//http://A.com
    console.log(event.source)//引用A window
    console.log(event.data) //数据}, false)

###WebSocket###

var ws = new WebSocket('wss://a.com');
//ws 类似http为非加密，wss类似https为加密
ws.onopen = function(){}//打开链接
ws.onmessage = function(){}//收到消息
ws.onclose = function(){}//关闭连接

###CORS###

//使用 fetch 的构造函数请求数据后，返回一个 Promise 对象，处理即可。
//Fetch 常见坑
//Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: 'include'})
//服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
 fetch("/some/url", {
    method:'get
 '}).then(function(response){
    }).catch(function(err){
  })

以上是JS如何實現瀏覽器通信的詳細內容。更多資訊請關注PHP中文網其他相關文章！