// scripts/redirect-href.js

/**
 * 執(zhí)行普通頁(yè)面跳轉(zhuǎn)
 * @param {string} url - 目標(biāo) URL
 * @param {boolean} [forceReload=false] - 是否強(qiáng)制刷新（實(shí)際效果與直接賦值無(wú)異）
 */
function redirectTo(url, forceReload = false) {
  // 驗(yàn)證 URL 格式（簡(jiǎn)化版）
  if (!url || typeof url !== 'string') {
    console.error('Invalid URL provided for redirection');
    return;
  }

  // 可以添加 URL 預(yù)處理邏輯
  const normalizedUrl = normalizeUrl(url);

  try {
    // 執(zhí)行跳轉(zhuǎn)
    window.location.href = normalizedUrl;
    console.log(`Redirecting to: ${normalizedUrl}`);
    // 注意：此后的代碼在大多數(shù)情況下不會(huì)執(zhí)行
    // 因?yàn)闉g覽器立即開(kāi)始加載新頁(yè)面
  } catch (error) {
    // 在極少數(shù)情況下可能拋出異常（如被 CSP 策略阻止）
    console.error('Redirection failed:', error);
    // 可以提供備選方案，如顯示錯(cuò)誤信息或提供手動(dòng)跳轉(zhuǎn)鏈接
    fallbackToLink(normalizedUrl);
  }
}

/**
 * 規(guī)范化 URL
 * @param {string} url
 * @returns {string}
 */
function normalizeUrl(url) {
  try {
    // 使用 URL 構(gòu)造函數(shù)進(jìn)行解析和重建，確保格式正確
    return new URL(url, window.location.origin).href;
  } catch (e) {
    // 如果解析失敗，原樣返回（可能外部 URL 或相對(duì)路徑）
    return url;
  }
}

/**
 * 備選跳轉(zhuǎn)方案（當(dāng) JavaScript 重定向失敗時(shí)）
 * @param {string} url
 */
function fallbackToLink(url) {
  const message = document.createElement('div');
  message.innerHTML = `
    <p>頁(yè)面跳轉(zhuǎn)失敗，請(qǐng)手動(dòng)點(diǎn)擊前往: <a href="${url}" rel="external nofollow"  target="_blank">前往目標(biāo)頁(yè)面</a></p>
  `;
  document.body.appendChild(message);
}

// 使用示例
document.getElementById('login-success-btn').addEventListener('click', () => {
  // 登錄成功后跳轉(zhuǎn)到儀表盤(pán)
  redirectTo('/dashboard');
});

document.getElementById('external-link-btn').addEventListener('click', () => {
  // 跳轉(zhuǎn)到外部網(wǎng)站
  redirectTo('https://www.example.com');
});

// 也可以直接在全局作用域使用
// window.location.;

// scripts/redirect-assign.js

/**
 * 使用 assign 方法跳轉(zhuǎn)
 * @param {string} url
 */
function navigateTo(url) {
  if (!isValidUrl(url)) {
    throw new Error(`Invalid URL: ${url}`);
  }

  // 使用 assign 方法
  window.location.assign(url);
  console.log(`Navigating to: ${url} via assign()`);
}

/**
 * 驗(yàn)證 URL 是否有效
 * @param {string} urlString
 * @returns {boolean}
 */
function isValidUrl(urlString) {
  try {
    new URL(urlString);
    return true;
  } catch (err) {
    return false;
  }
}

// 結(jié)合用戶(hù)交互的復(fù)雜跳轉(zhuǎn)邏輯
class NavigationManager {
  constructor() {
    this.pendingRedirect = null;
    this.redirectDelay = 3000; // 3秒延遲
  }

  /**
   * 延遲跳轉(zhuǎn)（例如：顯示提示后跳轉(zhuǎn)）
   * @param {string} url
   * @param {number} delayMs
   */
  delayedRedirect(url, delayMs = this.redirectDelay) {
    if (this.pendingRedirect) {
      clearTimeout(this.pendingRedirect);
    }

    // 顯示倒計(jì)時(shí)提示
    this.showCountdown(delayMs / 1000);

    this.pendingRedirect = setTimeout(() => {
      try {
        window.location.assign(url);
      } catch (error) {
        console.error('Delayed redirect failed:', error);
      }
    }, delayMs);
  }

  /**
   * 顯示倒計(jì)時(shí) UI
   * @param {number} seconds
   */
  showCountdown(seconds) {
    const countdownElement = document.getElementById('redirect-countdown');
    if (countdownElement) {
      countdownElement.textContent = `將在 ${seconds} 秒后跳轉(zhuǎn)...`;
      countdownElement.style.display = 'block';
    }
  }

  /**
   * 取消延遲跳轉(zhuǎn)
   */
  cancelRedirect() {
    if (this.pendingRedirect) {
      clearTimeout(this.pendingRedirect);
      this.pendingRedirect = null;
      const countdownElement = document.getElementById('redirect-countdown');
      if (countdownElement) {
        countdownElement.style.display = 'none';
      }
      console.log('Delayed redirect cancelled');
    }
  }
}

// 初始化導(dǎo)航管理器
const navManager = new NavigationManager();

// 綁定事件
document.getElementById('delayed-redirect-btn').addEventListener('click', () => {
  navManager.delayedRedirect('/thank-you');
});

document.getElementById('cancel-redirect-btn').addEventListener('click', () => {
  navManager.cancelRedirect();
});

<!-- navigation.html -->
<div id="redirect-countdown" style="display: none; color: #d9534f; font-weight: bold;"></div>
<button id="delayed-redirect-btn">提交并跳轉(zhuǎn)</button>
<button id="cancel-redirect-btn">取消跳轉(zhuǎn)</button>

// scripts/redirect-replace.js

/**
 * 執(zhí)行替換跳轉(zhuǎn)
 * @param {string} url
 */
function replaceTo(url) {
  if (!url) return;

  try {
    window.location.replace(url);
    console.log(`Replaced current page with: ${url}`);
  } catch (error) {
    console.error('Replace redirection failed:', error);
    // 提供備選方案
    window.location.href = url; // 退化為普通跳轉(zhuǎn)
  }
}

// 登錄成功后替換頁(yè)面
function handleLoginSuccess(redirectUrl = '/dashboard') {
  // 清除登錄狀態(tài)相關(guān)的臨時(shí)數(shù)據(jù)
  sessionStorage.removeItem('loginFormData');
  localStorage.removeItem('pendingLogin');

  // 使用 replace 防止用戶(hù)從 dashboard 后退到登錄頁(yè)
  replaceTo(redirectUrl);
}

// 支付成功后跳轉(zhuǎn)
function handlePaymentSuccess(orderId) {
  // 構(gòu)造包含訂單信息的成功頁(yè)面 URL
  const successUrl = `/payment/success?order=${orderId}`;
  // 使用 replace，避免用戶(hù)后退到支付表單頁(yè)
  replaceTo(successUrl);
}

// 處理 404 錯(cuò)誤后的自動(dòng)跳轉(zhuǎn)
function handleNotFound() {
  console.warn('Page not found, redirecting to home...');
  // 通常 404 后跳轉(zhuǎn)首頁(yè)，使用 replace 避免無(wú)限循環(huán)
  replaceTo('/');
}

// 檢測(cè)是否為替換跳轉(zhuǎn)進(jìn)入的頁(yè)面（用于特殊處理）
function isReplacedNavigation() {
  // 通過(guò)性能 API 檢測(cè)導(dǎo)航類(lèi)型
  const perfEntries = performance.getEntriesByType('navigation');
  if (perfEntries.length > 0) {
    const navEntry = perfEntries[0];
    // redirectCount 為 0 且 navigationType 為 1 (REPLACE) 或 0 (NAVIGATE)
    // 更精確的判斷需要結(jié)合具體邏輯
    return navEntry.type === 'reload' || navEntry.type === 'navigate';
  }
  return false;
}

// 頁(yè)面加載時(shí)檢查導(dǎo)航類(lèi)型
window.addEventListener('load', () => {
  if (isReplacedNavigation()) {
    console.log('This page was loaded via replace() or direct navigation');
    // 可以執(zhí)行特定于替換跳轉(zhuǎn)的初始化邏輯
  }
});

// scripts/redirect-new-window.js

/**
 * 在新窗口打開(kāi)并可選關(guān)閉原窗口
 * @param {string} url - 新窗口 URL
 * @param {string} [windowName='_blank'] - 窗口名稱(chēng)
 * @param {string} [windowFeatures=''] - 窗口特性
 * @param {boolean} [closeCurrent=false] - 是否關(guān)閉當(dāng)前窗口
 * @param {number} [delayMs=0] - 延遲關(guān)閉當(dāng)前窗口的時(shí)間（毫秒）
 * @returns {WindowProxy|null} - 新窗口的引用
 */
function openInNewWindowAndCloseCurrent(url, windowName = '_blank', windowFeatures = '', closeCurrent = false, delayMs = 0) {
  let newWindow = null;

  try {
    newWindow = window.open(url, windowName, windowFeatures);

    if (newWindow) {
      newWindow.focus(); // 焦點(diǎn)轉(zhuǎn)移到新窗口

      if (closeCurrent) {
        if (delayMs > 0) {
          setTimeout(() => {
            window.close(); // 嘗試關(guān)閉當(dāng)前窗口
          }, delayMs);
        } else {
          window.close();
        }
      }
    } else {
      // window.open 可能被彈窗攔截器阻止
      console.warn('Failed to open new window, possibly blocked by popup blocker');
      // 退化為當(dāng)前窗口跳轉(zhuǎn)
      window.location.href = url;
    }
  } catch (error) {
    console.error('Error opening new window:', error);
    // 退化處理
    window.location.href = url;
  }

  return newWindow;
}

// 使用場(chǎng)景：幫助文檔在新窗口打開(kāi)，原窗口保持
document.getElementById('help-link').addEventListener('click', (e) => {
  e.preventDefault();
  openInNewWindowAndCloseCurrent('/docs/user-guide', 'helpWindow', 'width=800,height=600,resizable=yes,scrollbars=yes');
});

// 使用場(chǎng)景：?jiǎn)吸c(diǎn)登錄（SSO）跳轉(zhuǎn)認(rèn)證服務(wù)器，完成后關(guān)閉登錄頁(yè)
document.getElementById('sso-login-btn').addEventListener('click', () => {
  const ssoUrl = 'https://auth.example.com/login?client_id=123&redirect_uri=https://app.example.com/auth/callback';
  // 在新窗口打開(kāi) SSO 登錄頁(yè)
  const authWindow = openInNewWindowAndCloseCurrent(ssoUrl, 'ssoAuth', 'width=500,height=600', true, 1000);
  // 注意：window.close() 在非用戶(hù)觸發(fā)的上下文中可能無(wú)效，且現(xiàn)代瀏覽器對(duì)此有嚴(yán)格限制
  // 更可靠的方案是 SSO 回調(diào)頁(yè)自行調(diào)用 window.close()
});

// 監(jiān)聽(tīng)新窗口的關(guān)閉事件（如果需要）
function monitorNewWindow(url) {
  const newWindow = window.open(url, '_blank', 'width=600,height=400');
  if (newWindow) {
    const checkClosed = setInterval(() => {
      if (newWindow.closed) {
        clearInterval(checkClosed);
        console.log('New window was closed by user');
        // 執(zhí)行后續(xù)邏輯，如刷新當(dāng)前頁(yè)面狀態(tài)
        // refreshUserData();
      }
    }, 500);
  }
}

// scripts/routing-redirect.js

// 模擬 SPA 路由狀態(tài)
const RouterState = {
  currentPath: window.location.pathname,
  isAuthenticated: false,
  userRole: null
};

/**
 * 前端路由守衛(wèi)（模擬）
 * @param {string} toPath - 目標(biāo)路徑
 * @param {string} fromPath - 源路徑
 * @returns {boolean} - 是否允許導(dǎo)航
 */
function navigationGuard(toPath, fromPath) {
  // 檢查身份驗(yàn)證
  if (requiresAuth(toPath) && !RouterState.isAuthenticated) {
    console.log(`Navigation to ${toPath} requires authentication`);
    // 重定向到登錄頁(yè)，并攜帶原路徑作為參數(shù)
    const loginUrl = `/login?redirect=${encodeURIComponent(toPath)}`;
    window.location.href = loginUrl;
    return false;
  }

  // 檢查角色權(quán)限
  if (requiresAdmin(toPath) && RouterState.userRole !== 'admin') {
    console.log(`Access denied to ${toPath} for non-admin user`);
    window.location.href = '/unauthorized';
    return false;
  }

  // 檢查維護(hù)模式
  if (isUnderMaintenance() && !toPath.startsWith('/maintenance')) {
    window.location.href = '/maintenance';
    return false;
  }

  return true;
}

/**
 * 檢查路徑是否需要身份驗(yàn)證
 * @param {string} path
 * @returns {boolean}
 */
function requiresAuth(path) {
  return ['/dashboard', '/profile', '/settings'].some(protectedPath => 
    path.startsWith(protectedPath)
  );
}

/**
 * 檢查路徑是否需要管理員權(quán)限
 * @param {string} path
 * @returns {boolean}
 */
function requiresAdmin(path) {
  return path.startsWith('/admin');
}

/**
 * 檢查是否處于維護(hù)模式
 * @returns {boolean}
 */
function isUnderMaintenance() {
  // 可以從配置或 API 獲取
  return false;
}

// 模擬用戶(hù)登錄
function simulateLogin(username, password) {
  // 簡(jiǎn)化驗(yàn)證邏輯
  if (username === 'admin' && password === 'password') {
    RouterState.isAuthenticated = true;
    RouterState.userRole = 'admin';
    console.log('Login successful');

    // 獲取登錄前的重定向目標(biāo)
    const urlParams = new URLSearchParams(window.location.search);
    const redirect = urlParams.get('redirect') || '/dashboard';

    // 使用 replace 避免登錄頁(yè)留在歷史記錄中
    window.location.replace(redirect);
  } else {
    alert('Invalid credentials');
  }
}

// 在頁(yè)面加載時(shí)執(zhí)行路由守衛(wèi)
window.addEventListener('load', () => {
  // 模擬路由解析
  const currentPath = window.location.pathname;
  // 假設(shè)這是從某個(gè)入口進(jìn)入的，需要檢查權(quán)限
  navigationGuard(currentPath, '/');
});

// 綁定登錄表單
document.getElementById('login-form')?.addEventListener('submit', (e) => {
  e.preventDefault();
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  simulateLogin(username, password);
});

<!-- login.html -->
<form id="login-form">
  <input type="text" id="username" placeholder="Username" required>
  <input type="password" id="password" placeholder="Password" required>
  <button type="submit">Login</button>
</form>