JavaScript 頁面加載即執行跳轉導致返回死循環的解決方案

在 Web 開發中，常遇到這樣的場景：頁面一加載就通過 JavaScript 自動點擊某個鏈接跳轉到另一個頁面。但當用戶點擊瀏覽器的「返回」按鈕回到原頁面時，頁面再次加載，再次觸發跳轉，導致無限循環，用戶無法正常停留在原頁面。

問題根因

每次返回相當於重新加載了一次原頁面，因此頁面加載時的跳轉邏輯會反覆執行，形成死循環。

解決思路：引入參數控制

核心思路是在 URL 中攜帶一個標識參數（如 rel=1），只有當參數存在且符合條件時才執行跳轉。返回時不帶該參數，即可避免重複跳轉。

代碼示例

準備兩個頁面：1.html（跳轉頁）和 2.html（目標頁）。

1.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <title>跳轉頁面</title>
</head>
<body>
  <a href="2.html" id="mykcxx0">跳轉到 2.html</a>
  <script type="text/javascript">
    // 解析 URL 參數
    function query(query) {
      var subUrl = location.search.slice(location.search.indexOf('?') + 1);
      var subArr = subUrl.split('&') || [];
      var querystr = '';
      subArr.forEach(function(v) {
        if (v.indexOf(query + '=') === 0) {
          querystr = v.slice(query.length + 1);
        }
      });
      return querystr;
    }

    window.onload = function() {
      var button = document.getElementById('mykcxx0');
      var rel = query('rel');
      // 只有當 rel 參數為 "1" 時才自動點擊跳轉
      if (rel == '1') {
        button.click();
      }
    };
  </script>
</body>
</html>

2.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <title>返回目標頁</title>
</head>
<body>
  <a href="1.html">返回 1.html（不帶參數）</a>
</body>
</html>

驗證流程

1. 直接打開 1.html，頁面不會跳轉，停留在原頁。
2. 在瀏覽器地址欄手動添加 ?rel=1 並回車，頁面自動跳轉到 2.html。
3. 在 2.html 點擊「返回」鏈接（指向 1.html 無參數），回到 1.html 且不再跳轉，循環打破。

實際應用建議

實際項目中，參數傳遞通常由業務邏輯動態生成（如登錄成功後重定向攜帶 token、狀態碼等），而非手動輸入。同樣原理適用於單頁應用（SPA）的路由守衛或服務端渲染的重定向控制。

總結：通過 URL 參數作為「執行標記」，讓跳轉邏輯成為一次性行為，有效解決返回觸發重複加載的死循環問題。