JavaScript 實現首頁遙控與單次彈窗的經典範例

前言

早期網站常見「首頁遙控器」與「只彈一次廣告視窗」功能，主要利用 window.open、window.opener 與 Cookie 控制。以下整理兩個經典實作範例。

範例一：首頁遙控器

由兩個檔案配合運作：主頁面開啟控制視窗，控制視窗透過 opener 導向主頁面跳轉。

檔案一：t1.html（主頁面）

<script language="JavaScript">
window.open("t2.html", "_blank", "width=200,height=200,scroll=no");
</script>

檔案二：t2.html（遙控器視窗）

<script language="JavaScript">
function op(add) {
    if (window.opener) {
        window.opener.document.location = add;
    }
}
</script>

<a href="#" onClick="op('link1.html')">地址1</a><br>
<a href="#" onClick="op('link2.html')">地址2</a><br>
<a href="#" onClick="op('https://music.example.com')">地址3</a>

原理： 子視窗透過 window.opener 存取開啟它的父視窗，修改父視窗的 document.location 實現導向。

範例二：只彈一次的視窗（利用 Cookie 判斷）

<script>
function get_cookie(Name) {
    var search = Name + "=";
    var returnvalue = "";
    if (document.cookie.length > 0) {
        var offset = document.cookie.indexOf(search);
        if (offset != -1) {
            offset += search.length;
            var end = document.cookie.indexOf(";", offset);
            if (end == -1) end = document.cookie.length;
            returnvalue = unescape(document.cookie.substring(offset, end));
        }
    }
    return returnvalue;
}

function showPopupOnce() {
    if (get_cookie('popup_shown') == '') {
        document.cookie = "popup_shown=yes; path=/; max-age=86400"; // 存活 1 天
        window.open("ad.html", "_blank", "width=400,height=300,scroll=no");
    }
}
</script>

<body onload="showPopupOnce()">

流程：
1. 定義 get_cookie 解析 Cookie 字串。
2. showPopupOnce 檢查是否已有 popup_shown Cookie。
3. 若無，寫入 Cookie 並開啟彈窗；若有則不執行。
現代替代方案： 使用 localStorage 或 sessionStorage 更簡潔，且不隨 HTTP 請求發送。

注意事項

• 現代瀏覽器預設攔截 window.open 彈窗，需用戶互動（如點擊）觸發才可正常開啟。
• 濫用彈窗會嚴重影響使用者體驗，建議改用頁面內層（Modal/Overlay）呈現重要資訊。