欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript跨域總結之window.name實現的跨域數據傳輸

 更新時間:2015年11月01日 09:47:38   作者:3.25  
本文給大家介紹window.name實現的跨域數據傳輸,自己親自實踐了一下,真的非常好用,特此分享到腳本之家網站供大家參考

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

有三個頁面:

    a.com/app.html:應用頁面。
    a.com/proxy.html:代理文件,一般是一個沒有任何內容的html文件,需要和應用頁面在同一域下。
    b.com/data.html:應用頁面需要獲取數據的頁面,可稱為數據頁面。

實現起來基本步驟如下:

    在應用頁面(a.com/app.html)中創(chuàng)建一個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)中監(jiān)聽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從外域傳遞到本地域。這個就巧妙地繞過了瀏覽器的跨域訪問限制,但同時它又是安全操作。

相關文章

最新評論