JS怎么获取当前页面域名？，JavaScript获取域名

在 JavaScript 中获取域名，最直接可靠的方式是通过 window.location 对象的 host 和 hostname 属性，前者返回带端口的完整主机名，后者返回纯域名，这两种写法几乎覆盖了全部前端开发场景。

js 获取当前域名的几种核心方法

把 location 对象摊开来看，host、hostname 和 href 三兄弟各司其职。href 是完整的地址字符串，包含协议、域名、端口、路径和参数；host 是“域名:端口”的组合；hostname 则干干净净只剩下域名主体。

window.location.host 的返回值细节

想象一个开发场景：你启动本地服务后访问 http://localhost:8080，window.location.host 返回的字符串是 localhost:8080，端口号被原样保留，如果线上环境走的是 https://blog.example.com，由于 443 是 HTTPS 默认端口，浏览器不会把它显式拼接出来，返回结果就是 blog.example.com。

console.log(window.location.host);
// 输出：example.com 或 example.com:8080（取决于是否存在非默认端口）

window.location.hostname 的纯净域名策略

hostname 不会携带任何端口信息，拿到的永远是纯粹的域名部分。https://www.example.com:8443 用 hostname 获取的结果只是 www.example.com，8443 这个端口被自动过滤掉了。

从数据清洗的角度看，hostname 在处理登录跳转、域名白名单校验这类需要精确匹配主机的业务逻辑时更安全,不容易被端口号干扰判断结果。

js 获取域名带端口时如何优雅处理

“js 获取域名带端口”是本地联调和多环境部署时绕不开的问题，因为 host 和 hostname 的差异恰恰体现在端口上,一个简单的布尔判断就能区分当前环境是否显式携带了端口。

检测端口是否存在

const host = window.location.host;
const hostname = window.location.hostname;
const hasExplicitPort = host !== hostname;

hasExplicitPort 为 true 说明当前 URL 使用了非默认端口，为 false 则是标准 80 或 443 端口,这套逻辑用在中后台系统的环境区分配置里相当顺手。

按业务需求选择性取值

偏向用户展示的场景（比如页脚版权信息）建议用 hostname，避免端口号暴露内部服务细节；偏向接口请求拼接的场景则优先用 host，因为完整的主机信息可以直接丢给 fetch 或 axios 的 baseURL。

// 展示用：只留域名
const displayDomain = window.location.hostname;
// 请求用：带上协议
const apiBase = `${window.location.protocol}//${window.location.host}/api`;

js 获取 url 域名前缀的三个实用技巧

“js 获取url域名前缀”是另一个高频需求，常见于需要区分 www 子域名、提取主域做 cookie 操作的场景。

去除 www 前缀

const raw = window.location.hostname;
const withoutWww = raw.replace(/^www./, '');

正则里的 ^ 锚定字符串开头，确保只处理开头的 www.，执行一次替换后得到的就是 example.com 这样干净的主域格式。

提取二级根域名

一般的根域名取最后两段就能拿到，但遇到

com.cn、net.cn 这类多级后缀就得额外处理。

function getRootDomain(hostname) {
  const parts = hostname.split('.');
  if (parts.length <= 2) return hostname;
  const multiLevelTLDs = ['com.cn', 'net.cn', 'org.cn', 'gov.cn', 'edu.cn'];
  const lastTwo = parts.slice(-2).join('.');
  if (multiLevelTLDs.includes(lastTwo)) {
    return parts.slice(-3).join('.');
  }
  return lastTwo;
}

getRootDomain('www.example.com.cn') 返回 example.com.cn，getRootDomain('www.example.com') 返回 example.com，这种写法在设置 document.cookie 的 domain 字段时非常实用。

动态取协议前缀

有些场景需要拿到 https:// 或 http:// 前缀再拼完整链接，location.protocol 直接输出带冒号的协议名,注意拼接时别漏了双斜杠。

前端获取域名后的实战运用场景

拿到域名只是第一步,关键看把它用在哪儿。

环境判断：开发、测试、生产的自动切换

根据域名包含的关键词自动切换接口环境,能省去手动改代码的麻烦：

const domain = window.location.hostname;
if (domain.includes('localhost') || domain.includes('127.0.0.1')) {
  // 本地开发，走 mock 数据
} else if (domain.startsWith('test.')) {
  // 测试环境节点
} else {
  // 线上生产环境
}

常见的前端项目脚手架里，环境配置文件的逻辑大体如此,差别只在判断条件的写法。

统计埋点与登录回调的参数装配

统计平台通常要求上报当前页面域名作为业务标识，运营人员核对数据时，如果发现上报内容混入了端口号或路径参数，经常需要来回沟通排查，直接在采集逻辑里统一用 hostname 取值,能提前规避这类数据污染问题。

第三方 SDK 初始化配置

接入地图或客服系统时，SDK 的初始化参数会要求传入站点域名做白名单校验，从 hostname 拿到的值不带多余字符,直接填入配置项即可完成绑定。

跨域 iframe 场景下获取域名的注意事项

页面里嵌了 iframe，情况会变得微妙起来，iframe 内部通过

window.location.hostname 拿到的是 iframe 自身资源的域名，而不是外层父页面的域名，想在 iframe 里获取顶层页面的域名，受浏览器的同源策略限制,直接跨域读取会被拦截并抛错。

惯用的安全方案是让父页面主动通过 postMessage 把域名消息发给 iframe：

// 父页面中
iframe.contentWindow.postMessage({
  type: 'domain-info',
  domain: window.location.hostname
}, '');
// iframe 内部
window.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'domain-info') {
    const parentDomain = event.data.domain;
    // 继续业务逻辑
  }
});

如果两个页面处于同一主域下的不同子域（a.example.com 和 b.example.com），业内专家指出可以手动设置 document.domain = 'example.com' 来放宽限制，但这个方法在现代浏览器中已经逐渐被边缘化，新项目优先考虑 postMessage 方案更稳妥。

js 获取域名常见问题解答

Q1: js 获取域名和获取 url 路径有什么区别？

域名对应 location.hostname，只包含主机部分；路径对应 location.pathname，是域名之后以斜杠开头的资源地址。https://www.example.com/blog/post/1?page=2 中，域名是 www.example.com，路径是 /blog/post/1，问号后面的 page=2 则是搜索参数，归 location.search 管。

Q2: js 获取站点根域名时遇到 IP 地址怎么办？

hostname 返回的 IP 字符串可以直接使用，0.0.1，做根域名提取时，先判断是否为纯 IP 格式正则匹配 IPv4 四段数字或包含 IPv6 冒号结构，命中则直接返回原值，避免末尾截断逻辑误伤 IP 地址。

Q3: 前端获取域名时怎么兼容 HTTPS 和 HTTP 环境？

hostname 不关心协议类型，两种环境下返回的域名结构一致，需要拼接完整资源地址时，用 location.protocol 动态获取当前协议，配合 host 拼出 https://xxx.com/resource 这样的链接,能确保切换环境和协议后依然正确。