快捷導(dǎo)航

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

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

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

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

在新窗口或標(biāo)簽頁中打開指定 URL

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

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

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

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

特點(diǎn)：

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

修改鏈接的 href 屬性

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

// HTML: <a id="myLink" href="#" rel="external nofollow" >跳轉(zhuǎn)</a>

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

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

特點(diǎn)：

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

window.location.href 當(dāng)前頁面重定向

在當(dāng)前窗口加載新頁面

// 直接跳轉(zhuǎn)（添加到歷史記錄）
window.location.;

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

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

特點(diǎn)：

在當(dāng)前窗口跳轉(zhuǎn)
會(huì)添加到瀏覽器歷史記錄
不會(huì)被彈窗攔截
replace() 方法不添加歷史記錄點(diǎn)

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