本節(jié)內(nèi)容：實(shí)現(xiàn)跨域常用的兩種方式 —— 降域 和 postMessage

零：跨域報(bào)錯展示

在非同源情況下，操作 ifream 引入的元素時，瀏覽器會阻止這一操作，并且報(bào)錯如下：

跨域報(bào)錯 —— ifream

• 本節(jié)會做演練，所以首先修改 hosts 文件，本節(jié)演練 hosts 文件增添內(nèi)容為：

127.0.0.1 localhost
127.0.0.1 a.yang.com
127.0.0.1 b.yang.com
127.0.0.1 yang.com
127.0.0.1 a.com
127.0.0.1 b.com

一、降域

• 何為降域？

降域仍是解決跨域問題的一種方案，通過雙向設(shè)置 document.domain 的值，解決主域名下的跨域問題。

• 降域的原理

• 比如，有兩個二級域名：a.yang.com 和 b.yang.com，可通過設(shè)定 document.domain 的值為主域名：yang.com 的方式，突破瀏覽器的同源策略限制，來獲取和操作對方的元素

• 這就好比，小 A 和小 B，手里拿著城主的令牌，通過哨卡時才能暢行無阻，否則哨卡不讓過

• 這也就決定了，降域具有很大的局限性，適用范圍較小，適合在同一主域名下使用；需要有降的空間，方可使用降域方式

• 降域的使用

• A 頁面域?yàn)椋篴.yang.com

• B 頁面域?yàn)椋篵.yang.com

• A 和 B 兩頁面都需加入該行代碼：document.domain = 'yang.com'; ，‘yang.com 是 a.yang.com 和 b.yang.com 的主域名

• 降域演練

自己動手，豐衣足食。我來手動演練一番。

• 演練說明
  1）頁面的說明：
  A 頁面的域?yàn)?a.yang.com；A 頁面擁有兩個元素 input 輸入框、ifream，ifream引入 B 頁面資源；
  B 頁面的域?yàn)?b.yang.com；B 頁面擁有一個元素 input 輸入框
  2）實(shí)現(xiàn)的功能：在任意 input 輸入框中輸入值時，另外一個 input 輸入框同步顯示輸入的值

• 搭建 web 服務(wù)器的工具：server-mock
  A 頁面代碼 a.yang.com

var input = document.querySelector('.main input');
input.addEventListener('input', function () {
        console.log('window:' + this.value);
        window.frames[0].document.querySelector('input').value = this.value;
});
document.domain = 'yang.com';

B 頁面代碼 b.yang.com

    var input = document.querySelector('input');
    input.addEventListener('input', function () {
        console.log('iframe:'+ this.value);
        window.parent.document.querySelector('input').value = this.value;
    });
    document.domain = 'yang.com';

1）同源情況下：window.frames[0].document.querySelector('input') 可取到 ifream 中的 input 元素
2）非同源情況下：因?yàn)橥床呗缘南拗?，無法取到相應(yīng)元素，會報(bào)錯

二、postMessage

因?yàn)榻涤虻木窒扌员容^大，只能使用到有降域空間的域名上，那么當(dāng)兩個主域名完全不同時，應(yīng)該如何處理呢？來看看新方法 postMessage。

• postMessage 原理

• postMessage 是 HTML5 中新增方法，可實(shí)現(xiàn)跨域通信；

• postMessage 并不是向服務(wù)器讀寫資源，只是向外發(fā)送消息而已；可以把它當(dāng)做使用手機(jī)發(fā)送短信消息，僅此而已。

• 也就是：A 頁面向 B 頁面發(fā)送了一條消息，B 頁面會接受到該消息，如果 B 頁面需要該消息，則監(jiān)聽 message；否則無需關(guān)心該消息

• postMessage 的使用

• 發(fā)送方：為目標(biāo)元素添加事件處理程序，監(jiān)聽事件類型

• 接收方：為 window 添加事件處理程序，事件類型為 messag

• postMessage 的演練

自己動手，豐衣足食。我來手動演練一番。

• 演練說明
  1）頁面的說明：
  A 頁面的域?yàn)?a.com；A 頁面擁有兩個元素 input 輸入框、ifream，ifream引入 B 頁面資源；
  B 頁面的域?yàn)?b.com；B 頁面擁有一個元素 input 輸入框
  2）實(shí)現(xiàn)的功能：在任意 input 輸入框中輸入值時，另外一個 input 輸入框同步顯示輸入的值

• 搭建 web 服務(wù)器的工具：server-mock
  A 頁面代碼 a.com

        var input = document.querySelector('.main input');
        input.addEventListener('input', function () {
            console.log('window:' + this.value);
            window.frames[0].postMessage(this.value, '*');
        });

        window.addEventListener('message', function (e) {
            console.log('window:'+ e.data);
            input.value = e.data;
        })

B 頁面代碼 b.com

    var input = document.querySelector('input');
    input.addEventListener('input', function () {
        console.log('iframe:'+ this.value);
        window.parent.postMessage(this.value, 'http://a.com:8080');
    });

    window.addEventListener('message', function (e) {
        console.log('ifream:'+ e.data);
        input.value = e.data;
    })

• postMessage 的注意點(diǎn)

• 這樣就解除了降域的限制，可以將 postMessage 應(yīng)用到各個不同的域之間，實(shí)現(xiàn)跨域訪問。該方式比較安全，因?yàn)閷Ψ讲⒉荒苤苯硬倏匚曳劫Y源，僅僅是發(fā)了一條消息，相當(dāng)于指令，而最終操作權(quán)限仍在自己手中
• 雖然解決了降域的限制，但是：postMessage 是 window 的一個方法，話句話說：它的弱點(diǎn)是只能向 window 窗口發(fā)送消息。所以使用時至少要有一個 window 才行，postMessage 不可以向其他域名發(fā)送消息。

最后：降域和 postMessage 都是小眾的降域方式，并不是經(jīng)常使用，若有需求可按需選擇

本文章著作權(quán)歸饑人谷和本人所有，轉(zhuǎn)載須說明來源！