前端实现 HTTPS 强制跳转与移动端域名自动适配

需求背景

一个标准的企业级网站通常会有 PC 端（www.xxx.com）和移动端（m.xxx.com）两个域名，同时需要确保全站使用 HTTPS 协议。我们需要实现：

html 复制代码

1.无论用户访问的是 HTTP 还是 HTTPS 协议，最终都强制跳转到 HTTPS
2.PC 端访问 www 域名保持不变，移动端访问 www 域名自动跳转到 m 域名
3.已在 m 域名下的访问不做任何跳转，非 www 开头的域名也不处理

执行时机：

建议将该函数放在页面标签内尽早执行，最好在其他脚本加载前完成跳转，避免页面无效渲染。

代码实现：

bash 复制代码

// 封装成独立函数，提高可读性和复用性
function redirectToHttpsAndMobile() {
    // 1. 定义常量，便于维护
    const TARGET_PROTOCOL = "https:";
    const MOBILE_DOMAIN_PREFIX = "m.";
    const PC_DOMAIN_PREFIX = "www.";
    // 移动端设备检测正则（覆盖主流移动端）
    const MOBILE_REGEX = /windows mobile|android|ucweb|iphone|ipad|ipod|mqqbrowser|harmony|miui|vivo|oppo/i;

    // 第一步：强制HTTPS协议（仅在非HTTPS时执行）
    if (window.location.protocol !== TARGET_PROTOCOL) {
        // 拼接HTTPS URL（避免直接拼接出错）
        const httpsUrl = `${TARGET_PROTOCOL}//${window.location.host}${window.location.pathname}${window.location.search}${window.location.hash}`;
        // 使用replace避免返回历史记录，提升用户体验
        window.location.replace(httpsUrl);
        // 终止函数执行，避免后续逻辑重复运行
        return;
    }

    // 第二步：移动端域名跳转（仅HTTPS下执行）
    const currentHost = window.location.host; // 仅获取域名部分（如www.xxx.com）
    
    // 跳过条件：1. 已是移动端域名 2. 非www开头的域名（避免误改）
    if (currentHost.startsWith(MOBILE_DOMAIN_PREFIX) || !currentHost.startsWith(PC_DOMAIN_PREFIX)) {
        return;
    }

    // 精准替换域名（仅替换www.为m.，不影响URL其他部分）
    const mobileHost = currentHost.replace(PC_DOMAIN_PREFIX, MOBILE_DOMAIN_PREFIX);
    const mobileUrl = window.location.href.replace(currentHost, mobileHost);

    // 检测是否为移动端设备
    const isMobile = MOBILE_REGEX.test(navigator.userAgent.toLowerCase());
    if (isMobile) {
        window.location.replace(mobileUrl);
    }
}

// 执行函数
redirectToHttpsAndMobile();

基础概念：

代码片段	含义	示例（以 http://www.xxx.com/test?a=1 为例）
window.location.protocol	当前页面的协议（带冒号）	http:
window.location.href	完整的页面 URL	http://www.xxx.com/test?a=1
substring(n)	截取字符串从第 n 位开始的部分	href.substring(5) → //www.xxx.com/test?a=1
replace("A","B")	替换字符串中第一个匹配的 A 为 B	替换后 → http://m.xxx.com/test?a=1
navigator.userAgent	浏览器 / 设备的标识字符串，用于判断设备类型	安卓手机的 UA 可能包含 "android"

执行逻辑示例：

以「用户用安卓手机访问 http://www.xxx.com」为例，代码执行流程：

检测到协议是 http: ≠ https:，执行跳转 → 跳转到 https://www.xxx.com；

页面重新加载后，再次执行代码：

第一步检测协议是 https:，不执行跳转；

生成移动端 URL：https://m.xxx.com；

检测 UA 包含 "android"，执行跳转 → 最终跳转到 https://m.xxx.com。