跨域訪問方法介紹(4)--使用 window.name 傳值
阿新 • • 發佈：2021-06-20
瀏覽器視窗有 window.name 屬性。這個屬性的最大特點是，無論是否同源，只要在同一個窗口裡，前一個網頁設定了這個屬性，後一個網頁可以讀取它。這種方法的優點是，window.name 容量很大，可以放置非常長的字串；缺點是必須監聽子視窗 window.name 屬性的變化，影響網頁效能。本文主要介紹使用 window.name 來實現跨域資料傳遞，文中所使用到的軟體版本：Chrome 90.0.4430.212。
1、步驟說明
在 a.html(http://localhost:8080/a.html) 頁面開啟 c.html(http://localhost:9090/c.html) 頁面，c.html 頁面設定 window.name 屬性並跳轉到 b.html(http://localhost:8080/a.html)，此時在 a.html 頁面就可以獲取到 c.html 頁面設定的 window.name 屬性的值。
2、a.html(http://localhost:8080/a.html)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>window.name 測試</title> </head> <body> <button onclick="openChild()">開啟子頁面</button> </body> <script type="text/javascript"> function openChild() { let childWindow = window.open("http://localhost:9090/c.html"); //監聽子視窗window.name的變化 let interval = setInterval(function(){ //子視窗window.name發生變化，停止定時任務 if (childWindow.name) { clearInterval(interval); console.log(childWindow.name); childWindow.close(); } },2000); } </script> </html>
3、b.html(http://localhost:8080/b.html)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>代理頁面</title> <script type="text/javascript"> alert(window.name); </script> </head> <body> 操作成功。該頁面即將自動關閉... </body> </html>
4、c.html(http://localhost:9090/c.html)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>資料</title> <script type="text/javascript"> //模擬使用者操作後，頁面跳轉 setTimeout(function() { window.name = "你好"; window.location.href = "http://localhost:8080/b.html"; }, 3000); </script> </head> <body> 資料... </body> </html>
5、測試
把 a.html 和 b.html 放到 tomcat (埠：8080) 的webapps\ROOT 下，c.html 放到另一個tomcat(埠：9090) 的webapps\ROOT 下。