跨域訪問方法介紹(4)--使用 window.name 傳值

時間 2021-08-12

標籤 javascript html java web 跨域瀏覽器 tomcat app webapp 性能欄目 Windows 简体版

原文原文鏈接

瀏覽器窗口有 window.name 屬性。這個屬性的最大特色是，不管是否同源，只要在同一個窗口裏，前一個網頁設置了這個屬性，後一個網頁能夠讀取它。這種方法的優勢是，window.name 容量很大，能夠放置很是長的字符串；缺點是必須監聽子窗口 window.name 屬性的變化，影響網頁性能。本文主要介紹使用 window.name 來實現跨域數據傳遞，文中所使用到的軟件版本：Chrome 90.0.4430.212。javascript

一、步驟說明

在 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 屬性的值。html

二、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>

三、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>

四、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>