JavaScript實現(xiàn)頁面跳轉的三種方法詳解

更新時間：2026年03月01日 16:34:15 作者：xixixin_

這篇文章主要介紹了JavaScript實現(xiàn)頁面跳轉的三種主要方法：window.open()、window.location.href和window.location.replace(),包括它們的特點、適用場景及最佳實踐,需要的朋友可以參考下

window.open() 打開新窗口/標簽頁

在新窗口或標簽頁中打開指定 URL

// 參數(shù)說明：
// url：要打開的地址（可選）
// target：窗口目標（_blank新窗口、_self當前窗口等）
// features：窗口特征（尺寸、位置等）
// replace：是否替換歷史記錄
window.open(url, target, features, replace)

// 新標簽頁打開
window.open('https://example.com', '_blank');

// 當前頁面打開
window.open('https://example.com', '_self');

// 打開特定大小的窗口
window.open('https://example.com', 'popup', 'width=600,height=400');

特點：

可控制是否在新窗口打開
可自定義窗口大小和位置
可能被瀏覽器彈窗攔截
返回新窗口的引用

修改鏈接的 href 屬性

通過更新鏈接的 href 屬性實現(xiàn)跳轉

// HTML: <a id="myLink" href="#" rel="external nofollow" >跳轉</a>

// 方式1：直接修改 href
document.getElementById('myLink').;

// 方式2：通過點擊事件
document.getElementById('myLink').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默認行為
  window.location.;
});

特點：

保持鏈接的語義和可訪問性
不會被彈窗攔截
用戶體驗更符合預期
適用于動態(tài)更新導航鏈接

window.location.href 當前頁面重定向

在當前窗口加載新頁面

// 直接跳轉（添加到歷史記錄）
window.location.;

// 替換當前歷史記錄（無法回退）
window.location.replace('https://example.com');

// 刷新當前頁面
window.location.reload();

特點：

在當前窗口跳轉
會添加到瀏覽器歷史記錄
不會被彈窗攔截
replace() 方法不添加歷史記錄點

方法	跳轉方式	歷史記錄	彈窗攔截	適用場景
window.open()	新窗口 / 標簽頁	新窗口有自己的歷史	可能被攔截	需要在新窗口打開內容
修改href	當前窗口	添加新記錄	不會被攔截	動態(tài)更新導航鏈接
window.location	當前窗口	添加或替換記錄	不會被攔截	編程式頁面重定向