需求背景
一个标准的企业级网站通常会有 PC 端（www.xxx.com）和移动端（m.xxx.com）两个域名，同时需要确保全站使用 HTTPS 协议。我们需要实现：
- 无论用户访问的是 HTTP 还是 HTTPS 协议，最终都强制跳转到 HTTPS。
- PC 端访问 www 域名保持不变，移动端访问 www 域名自动跳转到 m 域名。
- 已在 m 域名下的访问不做任何跳转，非 www 开头的域名也不处理。
执行时机
建议将该函数放在页面标签内尽早执行，最好在其他脚本加载前完成跳转，避免页面无效渲染。
代码实现
// 封装成独立函数，提高可读性和复用性
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。
