DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript跨域總結之window.name實現的跨域數據傳輸
javascript跨域總結之window.name實現的跨域數據傳輸
編輯:關於JavaScript     

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

有三個頁面:

    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從外域傳遞到本地域。這個就巧妙地繞過了浏覽器的跨域訪問限制,但同時它又是安全操作。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved