浏览器域名的基础概念
在深入探讨 JavaScript 获取浏览器域名的方法之前，首先需要明确几个基础概念，浏览器域名（Domain）是指网站在互联网中的地址标识，通常由协议（如 HTTP/HTTPS）、子域名、主域名和顶级域名组成，https://sub.example.com 中，example.com 即为主域名，在实际开发中，获取域名常用于跨域判断、环境适配、用户行为分析等场景。
JavaScript 作为前端开发的核心语言，提供了多种方式获取当前页面的域名信息，这些方法主要基于 window.location 和 document 对象，开发者可以根据需求选择最合适的方案。
核心方法：基于 window.location 获取域名
window.location 是 JavaScript 中一个只读属性，返回一个 Location 对象，包含当前页面的 URL 信息，通过该对象的属性，可以精准获取域名的各个部分。
location.hostname：获取完整主机名
hostname 是最常用的属性，直接返回当前页面的完整主机名，包括子域名和主域名，访问 https://blog.example.com/page 时，location.hostname 的值为 "blog.example.com"。
示例代码：
const domain = location.hostname; console.log(domain); // 输出: blog.example.com
location.host：获取主机名与端口号
与 hostname 不同，host 属性返回主机名和端口号（URL 中明确指定了端口）。https://example.com:8080 的 location.host 为 "example.com:8080"，而 location.hostname 仅为 "example.com"。
适用场景：当需要同时处理域名和端口时（如开发环境中的端口映射），host 属性更为适用。
location.origin：获取协议、域名与端口
origin 属性返回当前页面的源（origin），格式为 协议://域名:端口。https://example.com/page 的 origin 为 "https://example.com"，而 http://localhost:3000 的 origin 为 "http://localhost:3000"。
注意：origin 是只读属性，且在 IE 浏览器中不支持（可通过 window.location.protocol + "//" + window.location.host 兼容）。
location.href：获取完整 URL
href 返回当前页面的完整 URL，包含协议、路径、查询参数、哈希等，如果需要从完整 URL 中提取域名，可通过字符串处理或结合其他属性实现。
示例代码：
const fullUrl = location.href; console.log(fullUrl); // 输出: https://blog.example.com/page?query=1#section
兼容性与替代方案
虽然 window.location 是现代浏览器中获取域名的标准方式，但在某些特殊场景或旧版浏览器中，可能需要其他方法作为补充。
基于 document.domain 的跨域处理
document.domain 属性可获取或设置当前文档的域名，默认情况下，其值与 location.hostname 相同，但允许手动设置父域（如将 sub.example.com 设置为 example.com），以实现跨子域通信。
注意：document.domain 的设置受限于浏览器安全策略，且仅适用于同主域下的不同子域。
通过 URL 对象解析（现代浏览器推荐）
现代浏览器提供了 URL 构造函数，可更灵活地解析 URL，通过创建 URL 实例，可直接获取域名、端口、路径等信息。
示例代码：
const url = new URL(window.location.href); const domain = url.hostname; console.log(domain); // 输出: blog.example.com
优势：URL 对象提供了更规范的 API，支持查询参数解析、路径处理等，适合复杂 URL 场景。
实际应用场景
获取浏览器域名在前端开发中有着广泛的应用,以下是几个典型场景：
跨域请求判断
在发送 AJAX 请求或使用 fetch 时，常需要判断目标域名与当前页面是否同源，以避免跨域问题。
示例代码：
function isSameOrigin(targetUrl) {
const currentOrigin = window.location.origin;
const targetOrigin = new URL(targetUrl).origin;
return currentOrigin === targetOrigin;
}
console.log(isSameOrigin("https://example.com/api")); // false（非同源）
环境适配
根据不同域名加载不同资源或配置,开发环境使用 localhost，生产环境使用 example.com，可通过域名动态切换 API 接口。
示例代码：
const apiBaseUrl = location.hostname === "localhost"
? "http://dev-api.example.com"
: "https://api.example.com";
用户行为分析
在埋点统计中,域名可作为区分用户来源的维度之一，统计来自 blog.example.com 和 shop.example.com 的用户访问量。
动态路由与页面跳转
在单页应用（SPA）中，常通过域名或路径实现路由跳转，访问 app.example.com/user 时，动态加载用户模块。
注意事项与最佳实践
在使用 JavaScript 获取域名时，需注意以下几点，以确保代码的健壮性和安全性：
处理端口号与协议
不同场景下需关注端口号和协议。HTTP 默认端口 80 和 HTTPS 默认端口 443 在 location.host 中可能省略，需根据需求判断是否需要包含端口。
兼容性处理
对于旧版浏览器（如 IE），需注意 location.origin 和 URL 构造函数的兼容性，可通过 try-catch 或引入 polyfill 解决。
兼容 origin 的示例：
const origin = window.location.origin ||
window.location.protocol + "//" + window.location.host;
安全性考虑
避免直接将用户输入的域名拼接至 URL，以防恶意域名导致的钓鱼或 XSS 攻击，使用 URL 对象解析可减少安全风险。
特殊域名处理
对于特殊域名（如 .co.uk、.com.cn），需明确主域名的提取逻辑。example.co.uk 的主域名可能是 co.uk 而非 example，此时需结合业务需求自定义解析规则。
JavaScript 获取浏览器域名的方法多样，开发者可根据具体需求选择 window.location 的属性、document.domain 或 URL 构造函数，在实际应用中，需结合场景特点（如跨域、环境适配）和兼容性要求，选择最合适的方案，并注意安全性和边界情况的处理，掌握这些方法，不仅能提升开发效率，还能为构建安全、健壮的前端应用打下坚实基础。
