js获取当前域名的方法是什么？，获取当前域名怎么操作

用JS获取当前域名最直接的方法是读取window.location.host，它返回包含端口号的完整域名，如example.com:8080；如果只想拿纯域名，用window.location.hostname，去掉端口号。

先搞懂三个核心属性的区别

很多刚接触前端的朋友会把host、hostname、origin混在一起用，结果在本地开发时没事，一上生产就出问题，这三个属性都是window.location对象上的,但返回的内容完全不同。

属性	示例（假设当前URL为`https://www.example.com:8080/path?query=1`）
`window.location.host`	域名 + 端口号	`www.example.com:8080`
`window.location.hostname`	纯域名，不含端口	`www.example.com`
`window.location.origin`	协议 + 域名 + 端口	`https://www.example.com:8080`

最常用的是host和hostname，如果你要判断当前站点是不是某个特定域名，用hostname更干净，因为它不受端口干扰，如果你要拼URL或者做跳转，host更合适,因为浏览器要求带上端口才能正确访问。

不同场景下该用哪个方法

判断当前环境是本地还是线上

开发时我们经常要区分localhost和正式域名，用window.location.hostname判断：

const currentHost = window.location.hostname;
if (currentHost === 'localhost' || currentHost === '127.0.0.1') {
  console.log('本地开发环境');
} else {
  console.log('线上环境');
}

这里有个容易踩的坑：如果用host判断，本地开发时端口可能是8080，那么host返回的是localhost:8080，直接跟'localhost'比较永远不相等，所以做环境判断时，优先用hostname。

动态拼接API请求地址

很多项目会把API域名和页面域名分开，比如页面在www.example.com，接口在api.example.com,这时候需要从当前域名推导出API域名：

const apiBase = `https://api.${window.location.hostname}`;

但如果当前域名本身是api.example.com，这就会拼成api.api.example.com,更稳妥的方式是先判断子域名：

const hostParts = window.location.hostname.split('.');
let apiHost;
if (hostParts.length >= 2 && hostParts[0] === 'api') {
  apiHost = window.location.hostname;
} else {
  apiHost = `api.${window.location.hostname}`;
}

获取完整域名包含协议

当你需要把当前页面的完整地址发给后端做校验，或者做分享功能时，用window.location.origin最方便，它直接返回协议、域名和端口,不用自己拼字符串：

const fullOrigin = window.location.origin;
// 结果类似：https://www.example.com:8080

注意origin是只读属性，所有现代浏览器都支持，如果你要兼容特别老的浏览器，那就只能用window.location.protocol + '//' + window.location.host拼一下。

获取当前域名时容易踩的坑

端口号带来的麻烦

端口号是最大的隐形坑。host包含端口，hostname不包含，当你用host去匹配白名单时,如果端口变化就会匹配失败。

行业共识认为，生产环境默认端口是80或443，浏览器不会在host里显示80或443，但本地开发时端口千奇百怪，如果你用host做判断,一定要做好端口处理：

const hostWithoutPort = window.location.host.split(':')[0];

IPv6地址的特殊情况

如果你的域名是IPv6地址，比如[::1]:8080，那么host返回的是带方括号的完整地址，hostname返回[::1]，origin返回http://[::1]:8080,直接用字符串比较时要注意方括号的存在。

iframe嵌套时的域名问题

在iframe里，window.location指向的是iframe自身加载的页面，不是外层页面，如果你在iframe内嵌页面里执行window.location.hostname，拿到的是iframe的域名，不是父页面的域名，要获取父页面的域名,需要这样：

if (window.parent !== window) {
  const parentHost = window.parent.location.hostname;
}

但这里有一个浏览器安全限制：如果iframe和外层页面不同源，访问

window.parent.location会抛出跨域错误，这时候只能靠document.referrer间接获取来源，或者让父页面通过postMessage把域名传进来。

用JS获取当前域名的几种进阶写法

同时兼容多种环境

结合上面的知识点,写一个健壮的函数：

function getCurrentDomain() {
  return {
    host: window.location.host,
    hostname: window.location.hostname,
    origin: window.location.origin,
    port: window.location.port,
    protocol: window.location.protocol
  };
}

调用后就能拿全所有信息,需要什么取什么。

在Vue或React中更优雅地使用

框架里一般不用每次都写window.location，Vue项目中可以在main.js里挂载到原型上：

Vue.prototype.$domain = window.location.host;

React中可以直接用自定义Hook：

const useCurrentDomain = () => {
  const [domain] = useState(window.location.host);
  return domain;
};

不过在服务端渲染（SSR）框架里要小心，window在服务端不存在，需要在useEffect或onMounted生命周期里执行获取操作,否则会报错。

获取当前域名后能做什么

根据域名切换站点主题

多站点布局常用这个逻辑，比如同一个代码部署在不同的域名下,展示不同的品牌色和LOGO：

const hostname = window.location.hostname;
const themeMap = {
  'www.brand-a.com': { primaryColor: '#FF5500', logo: '/logo-a.png' },
  'www.brand-b.com': { primaryColor: '#0055FF', logo: '/logo-b.png' }
};
const currentTheme = themeMap[hostname] || themeMap['www.brand-a.com'];

这样不用维护多套代码,一个前端包就能跑所有站点。

埋点统计区分渠道来源

做数据采集时，经常要把用户访问的完整域名和路径一起传给服务器。业内专家指出，埋点上报数据里最核心的几个字段之一就是页面URL,直接拼：

const pageUrl = window.location.href;
const pageDomain = window.location.host;
// 上报给统计服务

防盗链和权限控制

某些资源只允许白名单域名引用，前端可以在加载完DOM后检查域名是否合法,不合法就替换内容或跳转：

const allowedDomains = ['www.example.com', 'm.example.com'];
if (!allowedDomains.includes(window.location.hostname)) {
  document.body.innerHTML = '当前域名未授权';
}

不过这种纯前端校验防不住技术手段,只适合做基础的门槛。

关于js获取当前域名你常问的问题

`window.location.host`和`window.location.hostname`到底选哪个？

多数情况下用hostname，因为它不含端口，稳定且容易匹配，只有在需要精确到端口号，比如本地调试时区分8080和3000，才用host，判断当前页面是否处于HTTPS环境时，用location.protocol,跟域名无关。

有没有办法在页面加载前就拿到域名？

可以。window.location在脚本执行时已经存在，只要脚本不是异步延迟到DOM解析完成后才执行，你在<head>标签里的内联脚本中就能直接读到域名，如果脚本在页面底部，也可以在DOMContentLoaded事件之前执行,读取时机并不受限制。

使用`window.location.host`会触发跨域问题吗？

不会，读取window.location自身页面的属性属于同源页面操作，浏览器允许任何脚本读取当前窗口的地址，只有在跨域访问其他窗口（如iframe的父窗口或弹窗窗口）的location属性时，才会触发安全限制，并且会抛出SecurityError异常。

获取域名时为什么有时候返回小写？

浏览器的URL解析规则里，域名部分不区分大小写，所以window.location.hostname和host返回的都是统一小写格式，如果你在地址栏输入WWW.EXAMPLE.COM，浏览器会自动规范化，读取到的值依然是www.example.com，所以不需要额外做toLowerCase()处理，但如果你自己拼接字符串时使用了变量，保险起见还是调用一下toLowerCase(),避免服务器端配置大小写敏感时出问题。

回到最开始的问题：JS获取当前域名，window.location.host是完整域名带端口，window.location.hostname是纯域名，你要做环境判断就用hostname，要拼接URL就用host，要完整地址就用origin，理解这三者的区别，基本就能覆盖90%以上的前端需求。

图片来源于AI模型，如侵权请联系管理员。作者：酷小编，如若转载，请注明出处：https://www.kufanyun.com/ask/773533.html