跨域通信浮標——實現客戶端之間的跨域通信

本文將介紹跨域通信浮標的使用方法，該浮標可以實現客戶端之間的跨域通信，解決了瀏覽器同源策略的限制，讓開發者能夠更加方便地進行跨域通信。

一、浮標的原理

跨域通信浮標的原理是基於浮動框架的，該框架內嵌兩個框架，一個用於載入1.html，另一個用於載入2.html。由於同源策略的限制，1.html和2.html無法直接進行通信，因此引入了浮標iframe.html。

當1.html需要向2.html傳遞數據時，1.html會將數據發送到浮標iframe.html中的input元素，並將input元素的value值設置為數據。同時，1.html會向2.html發送一個get請求，請求url為iframe.html中的iframe元素的src屬性加上一個hash值（hash值即是input元素的value值）。

2.html中通過監聽hash值的變化，可以獲取到1.html傳遞過來的數據，並通過修改hash值觸發onhashchange事件，通知1.html數據已經接收到了。注意，2.html需要在窗口首次載入時就監聽hash值的變化，否則無法正常接收到數據。

二、實現方法

1、將浮標iframe加入到頁面中

<iframe id="bpost" name="bpost" src="iframe.html" style="display:none"></iframe>

在頁面中加入一個id為bpost的iframe元素，並將其src屬性設置為iframe.html。由於該iframe元素並不需要展示在頁面上，因此style屬性可以設置為display:none。

2、發送數據

function postData(data) {
  var bpostIframe = document.querySelector("#bpost");
  var bpostForm = bpostIframe.contentDocument.querySelector("#bpostForm");
  var bpostInput = bpostForm.querySelector("input");
  bpostInput.value = data;
  var url = bpostIframe.src + "#" + data;
  var bpostImg = new Image();
  bpostImg.src = url;
}

在發送數據的方法中，首先獲取到id為bpost的iframe元素，並獲取到其中的form元素和input元素。將數據設置到input元素的value值上，並將iframe元素的src屬性加上一個hash值，此處hash值即為數據。最後，通過創建一個Image對象，並將src屬性設置為url，實現發送請求，同時將數據傳遞給目標頁面。

3、接收數據

var lastHash = document.location.hash;
setInterval(function() {
  if (document.location.hash !== lastHash) {
    lastHash = document.location.hash;
    var data = lastHash.slice(1);
    // do something with data
  }
}, 200);

在接收數據的方法中，首先獲取到當前的hash值，然後通過setInterval定時器不斷監聽hash值變化。當hash值發生變化時，獲取到新的hash值，並將其作為數據進行處理。此處需要注意，hash值的第一個字元為「#」，需要將其去除，才能得到真正的數據。

三、浮標使用場景

跨域通信浮標適用於需要在客戶端之間進行跨域通信的場景。例如，A域名的頁面需要向B域名的頁面發送數據，或者A域名的頁面需要與B域名的頁面進行雙向通信。

四、使用注意事項

在使用跨域通信浮標的過程中，需要注意以下幾個問題：

• 浮標iframe.html和目標頁面必須在同一級域名下才能正常通信；
• 接收數據的頁面需要在窗口首次載入時就監聽hash值變化，否則無法正常接收數據；
• 浮標iframe.html中的form元素必須添加name屬性，並且name屬性的值為「bpostForm」，否則無法正常工作；
• 在發送數據時，hash值的長度不能超過2000個字元，否則可能會被瀏覽器截斷；
• 浮標iframe.html中的input元素的name屬性必須為「data」，否則無法正常工作。

五、總結

跨域通信浮標是一種實現客戶端之間跨域通信的簡單、有效的方法。通過浮標iframe.html中轉數據，可以解決跨域通信的限制，並且在實際使用中具有很高的可擴展性。