JS获取当前域名的3种方法详解

在前端开发中，经常需要获取当前页面的域名信息。本文将详细介绍JavaScript中获取当前域名的3种常用方法，帮助开发者快速掌握这一实用技巧。

1. 使用window.location对象

最常用的方法是使用window.location对象：

// 获取完整域名(包含协议)
const fullDomain = window.location.href;

// 获取主机名(包含端口)
const hostWithPort = window.location.host;

// 仅获取域名部分
const domainOnly = window.location.hostname;

2. 使用document.domain属性

对于同源策略下的域名获取，可以使用：

const domain = document.domain;
// 注意：此方法只能获取到当前文档的域名部分

3. 使用URL API(ES6新增)

现代浏览器支持URL API：

const url = new URL(window.location.href);
const domain = url.hostname;

实际应用场景

• 跨域请求时设置白名单
• 根据不同环境(开发/生产)动态配置API地址
• 网站统计分析时获取来源信息

注意事项

1. window.location.host包含端口号，而hostname不包含
2. document.domain在跨域情况下有限制
3. URL API在IE浏览器中兼容性较差

掌握这些方法可以帮助开发者更灵活地处理与域名相关的业务逻辑，提升开发效率。