瀏覽器視窗有 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 下，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/288221.html
標籤：其他
上一篇：[測驗]Sprint Boot