JavaScript 返回到上一頁的三種常用方法

在網(wǎng)頁開發(fā)中，實(shí)現(xiàn)“返回上一頁”功能非常常見。JavaScript 提供了多種方式來實(shí)現(xiàn)，下面詳細(xì)介紹三種最常用且可靠的方法，并附帶優(yōu)缺點(diǎn)對比和使用場景。

方法一：history.back()（最常用，推薦）

// 直接返回上一頁，等同于點(diǎn)擊瀏覽器“后退”按鈕
history.back();

// 或者
history.go(-1);

說明：

• history.back() 和 history.go(-1) 效果完全相同。
• 會觸發(fā)瀏覽器的歷史記錄后退，頁面狀態(tài)（如表單填寫、滾動(dòng)位置）通常能保持（取決于瀏覽器實(shí)現(xiàn)）。

示例（按鈕點(diǎn)擊返回）：

<button onclick="history.back()">返回上一頁</button>

優(yōu)點(diǎn)：

• 簡單、直觀。
• 用戶體驗(yàn)最好，模擬真實(shí)后退行為。
• 支持頁面狀態(tài)恢復(fù)。

缺點(diǎn)：

• 如果當(dāng)前頁是歷史記錄的第一頁，會無效（不會跳轉(zhuǎn)）。

方法二：history.go(-1)（等同于 back）

history.go(-1);  // 后退一步
// history.go(-2); // 后退兩步
// history.go(1);  // 前進(jìn)一步

說明：

• history.go(n) 中的 n 是整數(shù)，正數(shù)前進(jìn)，負(fù)數(shù)后退。
• 與 history.back() 完全等價(jià)，只是寫法不同。

使用場景：

• 需要?jiǎng)討B(tài)控制后退步數(shù)時(shí)更靈活。

方法三：window.location.href = document.referrer（根據(jù)來源頁跳轉(zhuǎn)）

if (document.referrer) {
    window.location.href = document.referrer;
} else {
    // 如果沒有來源頁（比如直接打開），跳轉(zhuǎn)到指定頁面
    window.location.href = '/index.html';
}

說明：

• document.referrer 返回引發(fā)當(dāng)前頁面跳轉(zhuǎn)的上一個(gè)頁面的 URL（字符串）。
• 直接設(shè)置 location.href 實(shí)現(xiàn)跳轉(zhuǎn)。

完整安全示例：

<button onclick="goBack()">返回上一頁</button>

<script>
function goBack() {
    if (document.referrer && document.referrer !== window.location.href) {
        window.location.href = document.referrer;
    } else {
        // 備選方案：跳轉(zhuǎn)到首頁或指定頁面
        window.location.href = '/';
    }
}
</script>

優(yōu)點(diǎn)：

• 可以明確知道要跳轉(zhuǎn)到哪個(gè)頁面。
• 在某些單頁應(yīng)用（SPA）中更可控。

缺點(diǎn)：

• 如果用戶是通過直接輸入 URL、書簽或搜索引擎進(jìn)入當(dāng)前頁，document.referrer 會為空。
• 不會保留瀏覽器歷史棧的“后退”狀態(tài)（屬于新跳轉(zhuǎn)）。
• 跨域時(shí) referrer 可能被屏蔽（受 Referrer-Policy 影響）。

三種方法對比總結(jié)

最佳實(shí)踐建議

大多數(shù)場景優(yōu)先使用 history.back()：

<button onclick="history.back()">返回</button>

需要兼容無來源頁的情況，結(jié)合 referrer：

function goBack() {
    if (history.length > 1) {
        history.back();
    } else {
        window.location.href = '/'; // 跳轉(zhuǎn)到首頁
    }
}

1. 移動(dòng)端或單頁應(yīng)用（Vue/React） 中常用 history.back()，配合路由守衛(wèi)更優(yōu)雅。

總結(jié)：99% 的情況下，直接使用 history.back() 就是最佳選擇，簡單可靠，用戶體驗(yàn)最好。

到此這篇關(guān)于JavaScript實(shí)現(xiàn)返回到上一頁的三種方法的文章就介紹到這了,更多相關(guān)JavaScript返回到上一頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論