JS如何获取域名：完整指南与代码示例

在前端开发中，获取当前页面的域名是一个常见需求。JavaScript提供了多种方法来获取域名信息，本文将详细介绍这些方法及其应用场景。

1. 使用window.location对象获取域名

最常用的方法是通过window.location对象获取域名：

// 获取完整域名（包含子域名）
const fullDomain = window.location.hostname;
console.log(fullDomain); // 例如：www.example.com

// 获取主域名（不包含子域名）
const domain = window.location.hostname.split('.').slice(-2).join('.');
console.log(domain); // 例如：example.com

// 获取包含端口号的完整域名
const hostWithPort = window.location.host;
console.log(hostWithPort); // 例如：www.example.com:8080

2. 使用document.domain属性

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

const domain = document.domain;
console.log(domain); // 返回当前文档的域名

3. 获取URL中的域名部分

如果需要从任意URL中提取域名，可以使用正则表达式：

function getDomainFromUrl(url) {
  const matches = url.match(/^https?:\/\/([^/?#]+)(?:[\/?#]|$)/i);
  return matches && matches[1];
}

const domain = getDomainFromUrl('https://www.example.com/path');
console.log(domain); // www.example.com

4. 处理特殊情况

对于本地开发环境（localhost）或IP地址访问的情况：

const hostname = window.location.hostname;
if(hostname === 'localhost' || hostname.match(/^\d+\.\d+\.\d+\.\d+$/)) {
  console.log('当前为本地环境或IP访问');
} else {
  console.log('当前域名为：' + hostname);
}

5. 实际应用场景

• 跨域请求控制：根据域名动态设置API接口地址
• 环境检测：区分开发、测试、生产环境
• 统计分析：记录用户访问的域名信息
• 安全验证：验证请求来源的合法性

6. 注意事项

• 使用window.location时要注意浏览器的同源策略限制
• 获取的域名包含或排除www前缀需要根据具体需求处理
• 在HTTPS页面中获取的域名会包含安全协议信息

通过以上方法，您可以轻松地在JavaScript中获取和处理域名信息。根据具体需求选择合适的方法，确保代码的兼容性和安全性。