JS如何获取网站域名，JavaScript获取当前域名代码

在Web前端开发中,获取当前网站的域名是一项基础且关键的操作，广泛应用于数据统计、跨域请求配置、多环境切换以及权限控制等场景。实现这一功能的核心在于利用浏览器原生的window.location对象，开发者需根据业务需求精准选择host、hostname或origin等属性，以确保获取的数据准确无误且符合安全规范。

核心方法：基于window.location对象的属性解析

JavaScript提供了全局对象window.location，它包含了当前页面的URL信息，获取域名并非只有一种写法，不同的属性返回的细节有所区别，理解这些差异是专业开发的第一步。

获取包含端口的完整域名：location.host
location.host属性返回的是域名（或IP地址）加上端口号，这在本地开发环境（如localhost:8080）或非标准端口的生产环境（如example.com:8443）中非常有用。

const currentHost = window.location.host;
// 示例返回：www.example.com:8080 或 192.168.1.1:3000

如果当前页面使用的是默认端口（HTTP为80，HTTPS为443），浏览器通常会省略端口号，此时location.host与location.hostname在视觉上是一致的，但在逻辑上保留了对端口的感知。

获取纯主机名：location.hostname
这是最常用的属性，它仅返回域名（或IP地址），不包含端口号和协议，对于大多数生产环境的业务逻辑判断（如判断是否为正式环境），hostname更为纯粹。

const currentHostname = window.location.hostname;
// 示例返回：www.example.com 或 baidu.com

在配置API接口请求地址时,如果后端服务通过反向代理已处理端口映射，或者服务运行在默认端口下，使用hostname能避免因端口变化导致的请求失败。

获取协议与主机全称：location.origin
location.origin返回的是协议、域名和端口的组合，这是一个相对较新的属性，但在现代浏览器中支持度极佳，它常用于构建完整的绝对路径，特别是在解决跨域问题或拼接动态资源链接时。

const currentOrigin = window.location.origin;
// 示例返回：https://www.example.com

使用origin可以有效避免因协议混用（如HTTP页面加载HTTPS资源）导致的“混合内容”报错，确保资源加载的安全性。

进阶应用：主域名提取与多环境处理

在实际的企业级项目中,仅仅获取当前域名往往不够，我们还需要处理子域名、环境判断以及URL字符串的解析。

提取主域名（剥离子域名）
在涉及单点登录（SSO）或共享Cookie的场景下，我们需要获取顶级域名（二级域名），从blog.example.com中提取出example.com，这需要结合字符串处理或正则表达式来实现。

function getMainDomain(url) {
    const hostname = window.location.hostname;
    const parts = hostname.split('.');
    // 如果是IP地址或本地域名，直接返回
    if (parts.length < 2 || /^(\d+\.){3}\d+$/.test(hostname)) {
        return hostname;
    }
    // 提取最后两部分作为主域名，适用于大多数 .com, .cn 等情况
    return parts.slice(-2).join('.');
}

这种处理方式对于拥有多个子服务的大型网站至关重要,它能够确保用户在www和m等子站之间切换时，登录状态得以保持。

动态环境配置与接口切换
专业的前端架构通常会根据域名自动切换API环境，通过判断hostname中的关键字，可以智能选择开发、测试或生产环境的接口地址，从而避免在代码发布时手动修改配置文件。

let apiBaseUrl;
if (window.location.hostname.includes('localhost') || window.location.hostname.includes('127.0.0.1')) {
    apiBaseUrl = 'http://dev-api.example.com';
} else if (window.location.hostname.includes('test')) {
    apiBaseUrl = 'http://test-api.example.com';
} else {
    apiBaseUrl = 'https://api.example.com';
}

这种基于域名的环境隔离策略,极大地提升了部署效率和代码的健壮性。

安全性与SEO考量

在获取和使用域名时,必须遵循E-E-A-T原则中的安全性与可信度要求，避免因代码漏洞导致的安全风险。

防止XSS与注入攻击
虽然window.location是只读属性，不易被直接篡改，但在将获取到的域名插入到DOM中或作为URL参数传递时，必须进行转义或验证，切勿直接将location.href未经处理地输出到页面中，以防恶意脚本利用URL参数进行反射型XSS攻击。

规范化URL与SEO
搜索引擎爬虫（如百度蜘蛛）在抓取页面时，对URL的规范性非常敏感，如果网站同时存在www.example.com和example.com，且未做301重定向，可能会导致权重分散，前端可以通过JS获取域名并辅助进行规范跳转，但最推荐的做法是在服务器端（Nginx/Apache）配置重定向规则，若必须使用JS处理，应确保在页面加载初期执行，减少对SEO抓取的影响。

独立见解：URL对象解析法的优势

除了直接使用window.location，现代JavaScript还提供了URL构造函数，这是一种更符合面向对象编程思维的解析方式，特别是在处理非当前页面的URL字符串时，new URL()表现出更强的专业性。

const urlStr = "https://user:pass@sub.example.com:8080/p/a/t/h?query=string#hash";
const urlObj = new URL(urlStr);
console.log(urlObj.hostname); // 输出：sub.example.com
console.log(urlObj.port);     // 输出：8080
console.log(urlObj.protocol); // 输出：https:

这种方法的优势在于其可预测性和容错性，当解析一个外部链接或动态生成的字符串时，new URL()会自动补全缺失的协议部分（如果可能），并提供清晰的API来访问各个组成部分，比传统的正则分割字符串更可靠、更易维护。

相关问答

Q1：在JavaScript中，location.host和location.hostname有什么本质区别？
A： 本质区别在于是否包含端口号。location.hostname仅返回主机的域名或IP地址（例如baidu.com）；而location.host返回的是域名加上端口号（例如baidu.com:8080），如果你的Web服务运行在非标准的80或443端口上，必须使用host来确保地址的完整性；如果运行在标准端口，两者通常显示相同，但建议在需要端口感知的场景下优先使用host。

Q2：如何判断当前网页是通过HTTPS协议访问的？
A： 最简单且专业的方法是检查window.location.protocol属性，该属性返回当前URL的协议类型，且末尾包含冒号，代码示例如下：

if (window.location.protocol === 'https:') {
    console.log("当前是安全连接");
} else {
    console.log("当前是非安全连接");
}

也可以检查window.location.secure属性（虽然已不推荐使用），或者直接使用window.location.isSecureContext来判断上下文是否安全，这对于调用现代Web API（如Service Workers或Geolocation）非常重要。

互动环节：
你在实际的项目开发中，是否遇到过因为端口或协议不一致导致的接口请求失败？你是如何利用JS获取域名来巧妙解决这个问题的？欢迎在评论区分享你的实战经验！