在JavaScript开发中，获取当前页面的域名地址是一项基础且高频的操作，无论是用于数据埋点、接口请求拼接，还是实现跨域通信，准确获取域名信息都至关重要。核心上文归纳是：JavaScript主要通过window.location对象和现代的URL API来实现域名及URL信息的获取，开发者应根据具体场景选择最合适的属性或方法，以确保代码的健壮性和可维护性。
基础方法：利用 window.location 对象
window.location 对象包含了当前URL的所有信息，是获取域名最直接、兼容性最好的方式，对于大多数常规业务场景,该对象的属性已经完全够用。
获取完整主机名（包含端口号）
使用 window.location.host 可以获取当前URL的主机名，如果当前地址是非标准端口（例如8080、443以外的端口）,该属性会自动包含端口号。
- 示例：对于
https://www.example.com:8080/path，host返回www.example.com:8080。 - 适用场景：需要明确区分开发环境（通常带端口）和生产环境,或者在进行WebSocket连接时。
获取纯主机名（不含端口号）
使用 window.location.hostname 仅返回主机的域名部分，不包含协议、端口及路径。
- 示例：对于
https://www.example.com:8080/path，hostname返回www.example.com。 - 适用场景：判断当前运行环境的核心域名,或者进行权限校验时。
获取协议来源
使用 window.location.protocol 可以获取页面使用的协议，通常返回 http: 或 https:（注意末尾包含冒号）。
- 适用场景：在混合内容（Mixed Content）环境下，动态决定资源加载协议,或者强制跳转HTTPS。
获取页面完整来源
使用 window.location.origin 返回协议、主机名和端口的组合，这是一个非常实用的属性，它代表了当前页面的“根”。
- 示例：
https://www.example.com:8080。 - 注意：在IE11及以下版本不支持此属性，需要进行兼容性处理（通常通过拼接
protocol + '//' + host实现）。
进阶方案：使用现代 URL API
随着ES6标准的普及，URL API 提供了一种更清晰、更面向对象的方式来解析和操作URL，相比于 window.location，它不仅能解析当前URL,还能解析任意字符串URL。
解析当前URL
通过 new URL(window.location.href) 可以创建一个URL对象，这种方式将URL的各个部分作为属性暴露出来,逻辑更加清晰。
解析任意字符串URL
这是 URL API 最大的优势，如果你需要获取一个第三方链接的域名，而不进行跳转，window.location 无能为力，而 URL API 可以轻松胜任。
- 代码逻辑：
const urlStr = "https://api.example.com/v1/users"; const urlObj = new URL(urlStr); console.log(urlObj.hostname); // 输出: api.example.com
- 专业见解：在处理前端路由或分析外链跳转时，使用
URLAPI 可以避免复杂的正则表达式匹配，减少出错概率,提升代码的可读性。
复杂场景处理：提取主域名与子域名
在实际开发中，我们经常需要获取“根域名”（例如从 sub.example.com 获取 example.com），以便设置Cookie或进行SSO（单点登录）处理,这属于较为专业的解决方案。
简单的字符串分割
对于简单的二级域名结构，可以通过 分割字符串并取后两位。
- 局限性：这种方法无法处理复杂的顶级域名（如
.com.cn,.co.uk）,容易导致截取错误。
基于公共后缀列表的健壮方案
为了准确获取主域名，专业的做法是引入“公共后缀列表”（Public Suffix List），在浏览器端，可以使用 tldts 等成熟的第三方库。
- 解决方案：利用库函数解析域名，它能准确识别
example.co.uk的主域名是example.co.uk而不是uk。 - E-E-A-T原则体现：盲目使用正则处理域名是新手常犯的错误，专业的架构师会推荐使用经过广泛验证的库来处理边缘情况,确保业务逻辑的准确性。
安全性与跨域注意事项
在获取和使用域名时,安全性是不可忽视的一环。
避免直接使用 document.domain
虽然 document.domain 可以获取或设置当前文档的域名，但它存在严重的安全隐患，且在现代Web开发中已逐渐被废弃。强烈建议不要使用此属性来尝试放宽同源策略限制，应使用 window.postMessage 进行安全的跨域通信。
防止DNS重绑定攻击
在将获取到的域名用于AJAX请求或WebSocket连接时，必须验证该域名是否在白名单之内，攻击者可能通过DNS重绑定攻击,将恶意IP解析为受信任的域名。
URL编码问题
如果域名中包含特殊字符（虽然极少见，但在国际化域名IDN中可能出现），或者从URL参数中提取域名片段，务必使用 decodeURIComponent() 进行解码,确保获取的字符串格式正确。
归纳与最佳实践
获取域名地址虽然看似简单,但在实际工程中需要根据需求精准选择。
- 常规开发：优先使用
window.location.origin或window.location.hostname,代码简洁且性能最高。 - 复杂解析：涉及非当前URL解析或复杂域名提取时，采用
URLAPI 或tldts等专业工具。 - 安全第一：永远不要信任未经验证的域名输入,确保所有基于域名的操作都在受控的安全策略下执行。
通过合理运用这些技术，开发者可以构建出更加稳定、安全且易于维护的前端应用。
相关问答
Q1：在JavaScript中，window.location.host 和 window.location.hostname 有什么区别？
A： 主要区别在于是否包含端口号。window.location.host 返回主机名加上端口号（example.com:8080），而 window.location.hostname 仅返回主机名（example.com），如果你的应用运行在标准的80或443端口，两者返回值相同；但在本地开发环境（如localhost:3000）或使用了非标准端口的服务器上,必须严格区分使用。
Q2：如何获取不带“www”前缀的域名？
A： 可以通过字符串操作或正则替换来实现，最简单的方法是先获取 hostname，然后检查它是否以 www. 开头，如果是，则使用 substring 或 replace 方法去除前4个字符。
代码示例：
let domain = window.location.hostname;
if (domain.startsWith('www.')) {
domain = domain.substring(4);
}
console.log(domain);
互动环节：
如果您在项目中遇到过特殊的域名解析需求，或者对跨域子域名获取有更好的解决方案,欢迎在评论区分享您的实战经验！
