JS怎么检测域名？如何获取当前网页域名？

JavaScript 检测域名是前端开发中处理环境判断、安全防护及数据统计的核心技术，通过利用浏览器原生的 window.location 对象结合正则表达式，开发者可以精准提取、验证和操作当前页面的 URL 信息。实现高效且准确的域名检测，不仅能够提升代码的健壮性，还能有效防止跨域攻击和资源盗用，是构建现代化 Web 应用的基石。 本文将深入探讨域名检测的各种技术细节、最佳实践以及在实际业务场景中的专业解决方案。

利用 window.location 对象获取基础信息

在 JavaScript 中，最直接、最权威的域名检测方式是访问 window.location 对象，该对象包含了当前 URL 的完整信息，且无需任何外部依赖,是所有域名操作的基础。

核心属性解析：

1. window.location.hostname：这是最常用的属性，用于获取不带端口号和协议的域名，对于 https://www.example.com:8080/path，hostname 返回 www.example.com,这是判断当前运行环境的基础。
2. window.location.host：与 hostname 不同，host 属性包含端口号，如果应用部署在非标准端口（如 8080 或 4433）上，使用 host 进行全匹配检测更为精准。
3. window.location.protocol：用于检测协议类型（http: 或 https:），在强制 HTTPS 跳转或混合内容修复中,该属性至关重要。
4. window.location.origin：返回协议、域名和端口的组合，即完整的源，在进行跨域资源共享（CORS）配置或 API 请求校验时，origin 是最安全的比对依据。

使用正则表达式提取核心域名

在实际业务中，我们往往不需要 www 子域名，或者需要提取顶级域名（如 .com）进行 Cookie 设置,正则表达式是不可或缺的工具。

提取主域名的专业方案：

为了从 sub.example.com 中提取 example.com，简单的字符串分割往往不够严谨，因为域名可能包含二级后缀（如 .co.uk）。以下是一个具备高容错性的正则解决方案：

function getMainDomain(url) {
    const domain = url || window.location.hostname;
    // 匹配非特殊字符，忽略协议和路径，精准捕获主域名部分
    const match = domain.match(/(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n?]+\.([^:/\n?]+))/);
    if (match && match[1]) {
        return match[1];
    }
    return domain;
}

独立见解： 许多开发者直接使用 split('.') 取倒数两位，这在处理国际域名（如 bbc.co.uk）时会出错。专业的域名检测必须引入公共后缀列表（Public Suffix List）的逻辑，或者至少在正则中预置常见的多级后缀规则,以确保在复杂网络环境下提取的准确性。

现代 URL API 的应用优势

除了传统的 window.location，现代浏览器提供了全局构造函数 URL，相比于直接操作字符串，URL API 提供了更清晰、更易于维护的解析方式,特别适用于处理外部链接或非当前页面的域名检测。

URL API 的应用示例：

const urlObj = new URL('https://api.example.com/v1/data');
console.log(urlObj.hostname); // 输出: api.example.com

专业优势： URL API 能够自动处理编码问题，并且将搜索参数解析为 URLSearchParams 对象，在需要分析来源域名（Referrer）时，使用 new URL(document.referrer).hostname 比正则提取更安全、更符合 E-E-A-T 原则中的代码规范性。

实际应用场景与解决方案

域名检测不仅仅是获取字符串，更是业务逻辑控制的关键节点,以下是三个高频且关键的应用场景。

环境区分与配置切换

在开发、测试和生产环境之间切换配置是前端工程化的标配。基于域名的环境判断是最可靠的方式,避免了硬编码环境变量带来的风险。

const ENV_CONFIG = {
    'localhost': { api: 'http://dev.api.com', debug: true },
    'test.example.com': { api: 'http://test.api.com', debug: true },
    'example.com': { api: 'https://api.example.com', debug: false }
};
const currentEnv = Object.keys(ENV_CONFIG).find(domain => window.location.hostname.includes(domain));
const config = ENV_CONFIG[currentEnv] || ENV_CONFIG['example.com'];

防盗链检测

为了防止资源被第三方网站恶意引用，通过检测 document.referrer 的域名是否在白名单内是必要的手段。

function checkReferrer() {
    const referrer = document.referrer;
    if (!referrer) return true; // 直接访问允许
    const referrerDomain = new URL(referrer).hostname;
    const allowedDomains = ['example.com', 'partner.com'];
    // 检查 referrer 是否属于允许的域名或其子域名
    return allowedDomains.some(allowed => referrerDomain === allowed || referrerDomain.endsWith('.' + allowed));
}

多租户 SaaS 系统的域名路由

对于 SaaS 平台，通常使用 tenant.example.com 的形式。前端需要精准解析子域名来加载对应租户的皮肤和配置。

function getTenantSubdomain() {
    const hostname = window.location.hostname;
    const parts = hostname.split('.');
    // 假设格式为 tenant.domain.com
    if (parts.length >= 3 && parts[2] === 'com') {
        return parts[0];
    }
    return 'default';
}

安全性与 SEO 注意事项

在进行域名检测时，必须时刻保持安全意识。切勿仅依赖前端 JavaScript 进行绝对的安全验证，因为客户端代码是可以被篡改的,所有的权限校验和敏感操作必须在服务端再次进行域名验证。

从 SEO 角度来看，如果使用 JavaScript 进行域名跳转（例如将多个域名指向同一个主站），必须确保使用 window.location.replace() 而非 window.location.href = ...。前者会替换当前历史记录，避免用户陷入“无法返回”的死循环，且更符合搜索引擎对跳转行为的解析逻辑，错误的域名检测可能导致 canonical 标签设置错误，从而导致重复内容问题，严重影响 SEO 排名。

相关问答

Q1：在 JavaScript 中，如何判断当前域名是否为 HTTPS 协议，如果不是，如何自动跳转？

A： 可以通过 window.location.protocol 来检测协议类型，如果检测到 http:，应使用 window.location.replace 重定向到 https: 版本,代码示例如下：

if (window.location.protocol === 'http:') {
    const httpsUrl = 'https://' + window.location.hostname + window.location.pathname + window.location.search;
    window.location.replace(httpsUrl);
}

使用 replace 方法比 href 赋值更好，因为它不会在浏览器历史记录中保留 HTTP 页面,防止用户点击后退按钮再次触发不安全的请求。

Q2：如何获取 URL 中的查询参数（如 ?id=123），并结合域名检测进行参数过滤？

A： 现代浏览器推荐使用 URLSearchParams API，首先确保域名在白名单内，然后提取参数，这是一种防御性编程策略,防止恶意站点通过链接注入非法参数。

function safeGetParam(param) {
    // 1. 域名白名单检测
    const allowedHosts = ['example.com'];
    const isHostAllowed = allowedHosts.some(host => window.location.hostname.endsWith(host));
    if (!isHostAllowed) {
        console.warn('Unauthorized domain access');
        return null;
    }
    // 2. 提取参数
    const params = new URLSearchParams(window.location.search);
    return params.get(param);
}

希望以上关于 JavaScript 域名检测的深度解析能为您的开发工作提供实质性的帮助，如果您在处理复杂的多级域名解析或跨域问题时遇到困难，欢迎在评论区留言,我们一起探讨更优的解决方案。