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從外域傳遞到本地域。這個就巧妙地繞過了瀏覽器的跨域訪問限制,但同時它又是安全操作。
相關文章
- window.name實現跨域功能跨域
- window.name 跨域跨域
- 客戶端本地儲存的比較及使用window.name資料傳輸客戶端
- 跨平臺表空間傳輸的實現
- 完成資料的跨界傳輸與驗證
- 使用Oracle可傳輸表空間的特性複製資料(3)跨平臺的傳輸實踐Oracle
- 檢視可跨系統可傳輸資料
- 用Flask實現視訊資料流傳輸Flask
- 關於廣域網的資料傳輸問題
- Xamarin Essentials教程實現資料的傳輸功能例項
- php實現SESSION跨域PHPSession跨域
- csv跨域傳輸再生成csv檔案處理跨域
- Oracle 12C 跨網路傳輸資料庫Oracle資料庫
- 資料出境難?如何打破跨國檔案傳輸的困局?
- vue---axios實現資料互動與跨域問題VueiOS跨域
- 九種方式實現跨域跨域
- Nginx反向代理實現跨域Nginx跨域
- nginx配置CORS實現跨域NginxCORS跨域
- 使用PHP實現跨域COOKIEPHP跨域Cookie
- 用可傳輸表空間實現Oracle跨平臺移植Oracle
- 用傳輸表空間跨平臺遷移資料
- RMAN跨平臺傳輸資料庫和表空間資料庫
- 使用tar+pigz+ssh實現大資料的高效傳輸大資料
- jsonp跨域獲取資料實現百度搜尋JSON跨域
- RMAN跨平臺可傳輸表空間和資料庫資料庫
- 跨域方案總結與實現跨域
- 九種跨域方式實現原理跨域
- 多種跨域方式實現原理跨域
- JSONP 跨域原理及實現JSON跨域
- 跨域訪問實現依據跨域
- CORS跨域cookie傳遞CORS跨域Cookie
- iPaas資料傳輸的方式
- 【資料遷移】XTTS跨平臺傳輸表空間(1.傳統方式)TTS
- 前後分離實現中,後臺 Laravel 接收資料的跨域解決方案Laravel跨域
- 跨國檔案傳輸軟體有哪些?跨國檔案傳輸遇到的問題
- 企業在跨國傳輸大資料會遇到哪些困難?大資料
- 【實驗】利用可傳輸表空間技術實現資料的高效遷移
- 鐳速傳輸是如何管理大檔案跨國傳輸的