HTML/JS/PHP 三種網頁延遲跳轉實作總覽：Meta Refresh、Location、Header 完整比較

Web 開發常需「N 秒後跳轉至指定頁面」。本文整理 HTML、JavaScript、PHP 三大類共 9 種跳轉方式，比較機制、適用場景、優缺點與實作細節，附完整程式碼可直接複製使用。

方式比較總表

完整程式碼範例 (3 秒跳轉至 index.php)

1. HTML Meta Refresh

<head>
    <meta http-equiv="refresh" content="3;url=index.php">
</head>

2. PHP Header Refresh (非阻塞，頁面仍可輸出內容)

<?php
header("Refresh: 3; url=index.php");
echo "3 秒後自動跳轉...";
?>

3. PHP Header Location (阻塞，立即重導向，可搭配 sleep)

<?php
sleep(3); // 延遲 3 秒
header("Location: index.php");
exit; // 必須 exit，防止後續碼執行
?>

4. JavaScript setTimeout + location.href (最通用)

<script>
setTimeout(function() {
    window.location.href = 'index.php';
}, 3000); // 3000 ms = 3 秒
</script>

5. JavaScript location.assign()

<script>
setTimeout(function() {
    window.location.assign('index.php');
}, 3000);
</script>

6. JavaScript location.replace() (不留歷史)

<script>
setTimeout(function() {
    window.location.replace('index.php');
}, 3000);
</script>

7. JavaScript history.go() (相對導航)

<script>
// 返回上一頁
setTimeout(function() { window.history.go(-1); }, 3000);
// 前進 2 頁
setTimeout(function() { window.history.go(2); }, 3000);
</script>

8. JavaScript window.open() (新視窗)

<script>
setTimeout(function() {
    window.open('index.php', '_blank', 'width=800,height=600');
}, 3000);
</script>

關鍵差異深度解析

Location vs Assign vs Replace

• location.href = '...' / location.assign('...')：行為相同，新增歷史記錄，用戶可按「上一頁」返回。
• location.replace('...')：替換 當前歷史記錄，用戶無法按「上一頁」返回原頁。適合：登入成功跳轉、付款完成頁、錯誤頁重導向。

Meta Refresh vs Header Refresh vs Header Location

• Meta Refresh：HTML 層面，靜態檔也能用，SEO 友善 (搜尋引擎可讀取)，但 W3C 不建議大量使用。
• Header Refresh：PHP 動態產生，頁面內容仍會顯示 (如倒數計時訊息)，不阻塞腳本執行。
• Header Location：發送 302 Found，瀏覽器立即重導向，腳本後續碼不會執行 (除非忽略 exit)，頁面內容不會顯示。

PHP Header Location 陷阱

// register.php
header("Location: login.php"); // 1. 瀏覽器收到 302，立即跳轉 login.php

// login.php
sleep(3);
header("Location: index.php"); // 2. 瀏覽器在 register.php 直接等 3 秒跳 index.php，login.php 內容從未顯示！

解決：登入頁改用 Meta Refresh 或 JS 延遲跳轉，或將延遲邏輯移至前端。

最佳實踐建議

1. 靜態頁/SEO：<meta http-equiv="refresh">
2. PHP 動態決定、需顯示倒數訊息：header("Refresh: N; url=...")
3. 表單處理、登入檢查、API 重導向：header("Location: ...") + exit
4. 前端互動、倒數計時、條件判斷：setTimeout(() => location.href=...)
5. 登入/付款成功、不想讓用戶回上頁：location.replace() 或 PHP header("Location: ...")
6. 所有 Header 跳轉前：絕對不能有任何輸出 (含空白、BOM、echo)，否則 Headers already sent 錯誤。

相關專題：《PHP 基本語法入門教程》、《PHP 網絡編程技巧總結》。