html域名识别跳转

admin
行业动态
2025-05-07
2

通过JS获取当前域名（ location.hostname），与预设域名比对，若不匹配则执行 location.href跳转至目标URL，常用于多

域名识别与跳转原理

通过JavaScript获取当前页面的域名信息（如example.com），结合逻辑判断实现自动跳转,核心技术包括：

html域名识别跳转第1张

域名提取：使用window.location.hostname获取当前域名
正则匹配：通过正则表达式识别主域/子域
条件跳转：根据匹配结果执行window.location.href或replace

核心代码实现

// 获取当前完整域名
const currentDomain = window.location.hostname;
// 定义跳转规则（示例）
const redirectRules = [
  { pattern: /^blog.example.com$/, target: 'https://blog.newsite.com' },
  { pattern: /^shop.example.com$/, target: 'https://shop.newsite.com' },
  { pattern: /^(.).example.com$/, target: 'https://$1.newsite.com' } // 动态子域替换
];
// 执行跳转逻辑
for (let rule of redirectRules) {
  if (rule.pattern.test(currentDomain)) {
    // 处理动态替换（如$1捕获组）
    let target = rule.target.replace(/$(d+)/g, (match, p) => {
      return currentDomain.match(rule.pattern)[p];
    });
    window.location.replace(target); // 无历史记录跳转
    break;
  }
}

关键技术点对比表

功能模块	技术方案	适用场景
域名提取	`window.location.hostname`	所有现代浏览器
子域识别	正则表达式匹配	多子域分流场景
动态路径替换	正则捕获组+字符串替换	保持子域结构的重定向
安全跳转	`window.location.replace`	避免返回原页面
跨协议处理	`location.protocol`检测	HTTP与HTTPS混用场景

常见问题与解决方案

如何识别三级子域名？

// 匹配形如`abc.blog.example.com`的三级子域
const pattern = /^([a-z0-9]+).blog.example.com$/;
// 提取三级子域名称
const subdomain = currentDomain.match(pattern)[1];

如何优化跳转性能？

将跳转规则缓存为Map对象：

const domainMap = new Map([
['blog.example.com', 'https://blog.newsite.com'],
['shop.example.com', 'https://shop.newsite.com']
]);
// 直接查找跳转
if(domainMap.has(currentDomain)){
window.location.href = domainMap.get(currentDomain);