javascript跨域總結之window.name實現的跨域資料傳輸

javascript跨域總結之window.name實現的跨域資料傳輸_javascript技巧

WBOY

發布： 2016-05-16 15:34:28

原創

1215 人瀏覽過

自己實踐了一下，真的很好用。特將具體實作方法記錄如下

有三個頁面：

    a.com/app.html：應用程式頁。
    a.com/proxy.html：代理文件，通常是沒有任何內容的html文件，需要和應用頁面在同一網域下。
    b.com/data.html：應用程式頁面需要取得資料的頁面，可稱為資料頁面。

實現起來基本步驟如下：

在應用程式頁面（a.com/app.html）中建立iframe，將其src指向資料頁面（b.com/data.html）。
資料頁面會將資料附加到這個iframe的window.name上，data.html程式碼如下：

  <script type="text/javascript">
    window.name = 'I was there!';  // 这里是要传输的数据，大小一般为2M，IE和firefox下可以大至32M左右
                     // 数据格式可以自定义，如json、字符串
  </script>

登入後複製

在應用程式頁面（a.com/app.html）中監聽iframe的onload事件，在此事件中設定此iframe的src指向本地域的代理檔案（代理檔案和應用程式頁面在同一網域下，所以可以相互通信）。 app.html部分程式碼如下：

<script type="text/javascript">
    var state = 0, 
    iframe = document.createElement('iframe'),
    loadfn = function() {
      if (state === 1) {
        var data = iframe.contentWindow.name;  // 读取数据
        alert(data);  //弹出'I was there!'
      } else if (state === 0) {
        state = 1;
        iframe.contentWindow.location = "http://a.com/proxy.html";  // 设置的代理文件
      } 
    };
    iframe.src = 'http://b.com/data.html';
    if (iframe.attachEvent) {
      iframe.attachEvent('onload', loadfn);
    } else {
      iframe.onload = loadfn;
    }
    document.body.appendChild(iframe);
  </script>

登入後複製

取得資料以後銷毀這個iframe，釋放記憶體；這也保證了安全（不被其他域frame js存取）。

<script type="text/javascript">
    iframe.contentWindow.document.write('');
    iframe.contentWindow.close();
    document.body.removeChild(iframe);
  </script>

登入後複製

總結起來即：iframe的src屬性由外域轉向本地域，跨域資料即由iframe的window.name從外域傳遞到本地域。這個就巧妙地繞過了瀏覽器的跨域存取限制，但同時它又是安全操作。