ASP.NET 倒數計時自動導向頁面實作：純 JavaScript 輕量方案

需求情境

使用者完成關鍵操作 (如修改密碼) 後，顯示倒數計時提示並在幾秒後自動導向首頁，同時提供手動連結供立即跳轉或返回。

完整實作碼：導向中介頁面 (LoginTiao.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LoginTiao.aspx.cs" Inherits="LoginTiao" %>
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <title>頁面導向中...</title>
    <script type="text/javascript">
        var countdown = 5;
        var targetUrl = "XXXXX/Home.aspx"; // 目標網址
        var backUrl = "Login.aspx";        // 返回網址

        window.onload = function tick() {
            var el = document.getElementById("time");
            if (el) el.innerText = countdown;

            if (countdown === 0) {
                window.location.href = targetUrl; // 修正：原碼用 href() 導致錯誤
                return;
            }

            countdown--;
            setTimeout(tick, 1000);
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="font-size: small; text-align: center; padding: 2rem;">
            <p>密碼修改成功，請妥善保管！</p>
            <p>
                <span id="time" style="font-weight: bold; color: blue;">5</span> 秒後自動跳轉至
                <a href="<%= targetUrl %>">系統首頁</a>...
            </p>
            <p>或 <a href="<%= backUrl %>">立即返回登入頁</a></p>
        </div>
    </form>
</body>
</html>

關鍵修正與優化點

• 修正導向語法：原碼 window.location.href("url") 錯誤，應為 window.location.href = "url" 或 window.location.assign("url")。
• 避免全域變數汙染：將倒數邏輯封裝在 window.onload 內部函式，不汙染全域命名空間。
• 參數化網址：使用變數 targetUrl、backUrl 便於維護，實際專案可從後端 Request.QueryString 或設定檔注入。
• 無障礙考量：提供手動連結，確保 JavaScript 被禁用或計時失效時仍可操作。

呼叫端：任意頁面一行導向

// C# 後端代碼
Response.Redirect("LoginTiao.aspx");

進階擴充建議

此方案零依賴、瀏覽器相容性極佳 (IE9+)、部署簡單，適合快速落地傳統 ASP.NET Web Forms 專案。