在网页里要拿到浏览器当前访问的域名，直接调用 window.location.hostname 就能返回不带端口和协议的纯域名；如果需要连端口一起获取，就用 window.location.host。
很多前端开发者在处理环境配置、接口转发、页面跳转时，都会遇到“怎么知道用户现在打开的是哪个域名”这个问题，需求听着简单，但不同写法在端口、协议、跨域几处细节上有明显差异,这篇就把相关方案和场景一次说清楚。
“javascript获取当前域名”最常用的两种写法
直接用 location.hostname 拿域名主体
window.location.hostname 返回的是当前页面的主机名，也就是域名本身，不含协议、端口和路径，假设浏览器地址栏显示的是 https://admin.example.com:8080/login，
window.location.hostname返回admin.example.comwindow.location.host返回admin.example.com:8080window.location.protocol返回https:
这套 API 由浏览器原生提供，兼容性很好，主流浏览器都能直接调用，不依赖任何第三方库，做“javascript获取当前域名”这类操作时，优先考虑 hostname 就够了。
用 location.host 拿到带端口的完整域名
如果项目里有多个环境，端口号也需要共同参与判断，那就用 window.location.host，本地开发跑在 localhost:3000，联调环境是 test.example.com:8081，生产环境是 example.com，单看 hostname 无法区分开相同域名下的不同端口，拿 host 的完整值会更准确。
下面是常用 location 属性的对比：
| 属性 | 示例（以 https://admin.example.com:8080/login 为例） | |
|---|---|---|
location.href |
完整 URL | https://admin.example.com:8080/login |
location.host |
域名 + 端口 | admin.example.com:8080 |
location.hostname |
纯域名 | admin.example.com |
location.port |
端口号 | 8080 |
location.protocol |
协议 | https: |
从这个表能清楚看到，“js获取当前网址域名”和“js获取当前网址”是两回事，前者只要域名段，后者连路径带参数全要。明确这一点，很多混淆就不会发生。
前端获取当前访问域名后，通常用在哪些实际场景
按域名做环境判断
最常见的用法是拿 hostname 区分当前跑在哪个环境，开发时域名多是 localhost 或 168.x.x，测试环境是 test.xxx.com，生产环境是 www.xxx.com。
判断逻辑可以这样写：
const host = window.location.hostname;
let env = 'production';
if (host.includes('localhost') || host.startsWith('192.168.')) {
env = 'development';
} else if (host.startsWith('test.')) {
env = 'testing';
}
这种“获取当前域名做环境判断”的写法，在中后台项目里几乎每天都会用到，环境不同，日志上报地址、异常监控开关、埋点策略都会跟着变。
动态切换接口域名
前端项目打包后通常部署到多个环境，接口请求的 baseURL 不能写死，构建时注入环境变量是常见做法，但也有不少情况是部署完才发现接口地址配错了，这时靠“网页获取浏览器域名”实时判断就灵活得多。
接口网关往往与页面同域，直接拼接 baseURL：
const baseURL = `${location.protocol}//${location.host}/api`;
这样不管是哪个域名打开页面，接口请求都会跟着当前域名走，不会出现页面从 A 域名打开、接口却请求 B 域名的情况。
按来源域名做跳转或展示
部分活动页需要根据访问域名展示不同内容，或者做“获取当前域名做跳转”的操作，比如用户在 m.example.com 打开页面自动跳到移动版，在 www.example.com 打开显示桌面版。
const hostname = window.location.hostname;
if (hostname === 'm.example.com') {
window.location.replace('/mobile-index');
}
这里用 replace 而不是 assign，replace 不会在浏览器历史里留下原页面记录，用户按返回键不会被“弹回”活动页。
JS获取当前网址域名时，这些细节容易忽略
端口号到底要不要带
“前端获取当前域名”最容易出错的地方就是端口。hostname 不带端口，host 带端口，但 host 在默认端口下会把端口省略，访问 https://example.com 和 https://example.com:443 时，host 返回的都是 example.com，没有 443，这一点在比对域名做判断时很有用,不用担心默认端口的干扰。
跨域 iframe 里的域名指向
如果页面嵌了 iframe，且 iframe 内容来自另一个域名，iframe 内部执行 window.location.hostname，拿到的是 iframe 内嵌页面的域名，而不是外层页面的域名，反过来，外层页面通过 contentWindow.location.hostname 去获取同样受跨域限制，浏览器会直接抛异常，这是浏览器安全策略决定的,没有绕过的好办法。
hash 路由下的域名获取
单页应用用 hash 路由（example.com/#/user）时，hostname 和 host 都不受影响。 之后的内容本就不在 location.pathname 里，只要关心的是域名，hash 路由没有干扰；改用 history 模式时，域名同样照常获取,不受影响。
从“拿到域名”到“用上域名”：一段实用代码拆解
把上述场景合并成一段可以直接用的方法：
function getCurrentDomainInfo() {
const protocol = window.location.protocol; // 'https:' 或 'http:'
const hostname = window.location.hostname; // 'www.example.com'
const port = window.location.port; // 可能是空字符串
const host = window.location.host; // 带端口或省略端口
return {
protocol,
hostname,
port,
host
};
}
const domainInfo = getCurrentDomainInfo();
console.log(domainInfo);
把这段代码粘到浏览器控制台执行，就能看到完整返回结果，实际项目中，建议把这段逻辑抽成公共方法放进工具文件，多个模块都能复用,后续要调整也只需要改一处。
网页获取当前访问域名的几种方法横向对比
除了 location 系列，document.domain 也能读到域名,但两者用途差别很大：
| 方法 | 使用限制 | |
|---|---|---|
location.hostname |
纯域名 | 几乎无限制 |
location.host |
域名 + 端口 | 默认端口下端口被省略 |
document.domain |
纯域名 | 跨域设置时受同源策略约束 |
document.domain 过去常被用于子域与主域之间的跨域通信，但现在更推荐用 postMessage 替代，这是行业共识，日常开发需要拿域名时，直接用 location 对象就够了,不必绕弯。
关于网页获取浏览器当前域名信息的常见问题
用 javascript 获取当前域名后，怎么去掉 www 前缀？
去掉前缀用字符串处理即可：
const hostname = window.location.hostname; const noWww = hostname.replace(/^www\./, '');
这在比对主域名、生成分享链接时会用到，但要注意，有些 CDN 域名不带 www,替换前最好先确认域名格式。
页面同时部署在多个域名下，怎么判断当前用的是哪个？
拿 hostname 去比对预定义的域名列表即可，把允许的域名写进数组，遍历匹配，命中后执行对应逻辑，这个做法在活动页、多租户系统里很常见，逻辑简单,也好维护。
用 location.host 和 location.hostname 拿到的域名有差异吗？
有差异。 host 在非默认端口下会包含冒号和端口号，hostname 永远只有域名部分，只做域名判断时优先用 hostname，可以减少端口干扰；需要完整拼接接口地址时，用 host 更省事。location 对象上的属性始终反映浏览器地址栏当前的完整状态，获取域名只是它最基本的用途之一，下次再需要判断访问来源时，先想起 location.hostname,大部分场景就已经解决了。