javascript利用location.hash跨域傳輸資料

 

之前已經寫了利用window.name來跨域傳輸資料，location.hash方法的原理也類似，同樣是利用location.hash改變後不會重新整理的特徵，通過引用外域的資料頁面修改首頁面的location.hash來達到傳輸資料的目的。

同樣是三個頁面：111cn.net /main.html（首頁面）、111cn.net /proxy.html（被代理頁面）、b.com/data.html（外域的資料頁面）

1.本域首頁面main.html的代碼

var iframe = document.createElement("iframe");
iframe.src = "http://www.b.com/data.html";
if (window.VBArray) {   // 如果是IE
    iframe.onreadystatechange = function () {
        if (iframe.readyState === 'complete') {
            alert(location.hash);
        }
    };
} else {
    iframe.onload = function () {
        alert(location.hash);
    };
}
document.body.appendChild(iframe);

2.外域的data.html的代碼如下

var data = "some datas";
try {
    parent.location.hash = data;
} catch (e) {
    var iframe = document.createElement("iframe");
    iframe.src = "http://www.111cn.net /proxy.html#" + data;
    document.body.appendChild(iframe);
}

3.本域的代理頁面proxy.html的代碼如下

// 因為兩個頁面都是同一個域，所以可以設定main.html的hash值

parent.parent.location.hash = self.location.hash;

和window.name跨域傳輸資料一樣的缺點，傳輸的資料是字串類型的，如果要傳JSON資料，首先要在data.html轉換成字串，然後在main.html在轉換回來，而且資料都暴露在url中，還一個限制就是就是URL的長度限制，最短的IE只能2048個字元，這可不能傳太多的資料。