解決 window.location.href 參數在瀏覽器地址欄消失的問題

問題背景

在 JavaScript 開發中，常使用 window.location.href 進行頁面跳轉並攜帶參數。有開發者遇到這樣的困擾：定義變量並賦值後，彈窗顯示的完整 URL 參數正確，但實際跳轉後瀏覽器地址欄卻不見了該參數，排查一整晚無果。

核心原因分析

這通常不是 window.location.href 本身的問題，而是 JavaScript 執行過程中發生了報錯，導致後續跳轉邏輯中斷，或參數拼接邏輯有誤。此外，若在 JSP/模板引擎中直接將後端變量（如 EL 表達式 ${borrowId}）內嵌至 JS 代碼中，若轉義不當極易引發語法錯誤。

推薦解決方案

1. 優先檢查 JavaScript 控制台報錯

打開瀏覽器開發者工具（F12），切換到 Console 面板，查看是否有紅色錯誤信息。任何 JS 錯誤都會阻斷後續代碼執行，導致跳轉行為異常。

2. 規範後端變量在 JS 中的寫法

建議將 EL 表達式的結果賦值給 JS 變量，再進行邏輯判斷，避免直接在代碼中拼接導致語法錯誤：

var isBorrowIdNull = '${not empty borrowId}';
if ('true' == isBorrowIdNull) {
    // 執行 borrowId 不為空時的代碼邏輯
    window.location.href = '/target?borrowId=' + '${borrowId}';
}

這樣可確保變量在 JS 中為字符串 "true" 或 "false"，邏輯判斷更穩健。

3. 驗證參數拼接與編碼

使用 encodeURIComponent() 對參數值進行編碼，防止特殊字符導致 URL 解析異常：

var param = encodeURIComponent(borrowId);
window.location.href = '/target?borrowId=' + param;

總結

遇到參數「消失」現象，首先檢查 JS 報錯，其次規範後端變量向前端傳遞的寫法，最後做好參數編碼。多數情況下，問題源於 JS 執行中斷而非 window.location.href 本身失效。