JS如何取域名？，JS取域名的方法有哪些

在JavaScript中，获取域名最直接的方法是使用window.location.hostname，它返回当前页面不包含端口号的域名部分。

爬虫和前端工程师日常打交道最多的就是window.location对象，这个对象身上挂着一堆属性，专门用来解析当前页面的URL，今天我们就来聊聊怎么用JavaScript取域名,以及在不同场景下该选哪个属性。

js 获取域名的常用方法

要获取域名，location对象提供了三个核心属性：hostname、host、origin，它们返回的内容各有侧重,选错可能会导致端口号或协议漏掉。

使用location.hostname

这是最干净的方法，hostname只返回域名部分，端口号、协议一概不包含，比如当前页面是https://www.example.com:8080/page，hostname返回www.example.com，对于绝大多数场景，比如判断当前站点、拼接资源路径,这个属性就够用了。

const domain = window.location.hostname;
console.log(domain); // 输出 "www.example.com"

使用location.host

host返回的是域名加端口号，如果端口号是默认的80或443，浏览器会省略端口，此时host和hostname结果一样，但如果页面跑在自定义端口下，比如localhost:3000，host返回localhost:3000，而hostname只返回localhost。

const hostWithPort = window.location.host;
console.log(hostWithPort); // 输出 "www.example.com:8080"

使用location.origin

origin返回协议+域名+端口，是一个完整的源，比如https://www.example.com:8080，这个属性在跨域判断时非常有用,因为跨域比较的就是源。

const origin = window.location.origin;
console.log(origin); // 输出 "https://www.example.com:8080"

使用URL构造函数解析任意URL

如果传入的是一个完整的URL字符串，需要从中提取域名，用new URL()最方便，它支持所有浏览器，而且不需要手写正则，比如后端返回了一个跳转地址,你想校验它的域名是否在白名单内。

const url = new URL('https://sub.example.com/path?query=1');
console.log(url.hostname); // "sub.example.com"
console.log(url.host);     // "sub.example.com"
console.log(url.origin);   // "https://sub.example.com"

各属性返回值的对比

行业共识认为，在不涉及端口和协议的情况下，优先使用hostname，它返回的数据最纯粹,不会出现意外的数字或冒号。

js 取域名时如何处理端口和协议

在实际项目中，很多问题都出在端口上，比如测试环境用3000端口，生产环境用443，如果你用host取域名，本地环境就会带上端口,导致用域名拼接的接口地址出错。

区分host与hostname的使用场景

判断当前域名是否属于某个站点时，应该用hostname，比如单点登录时，需要确认当前域名是否在信任列表里，把列表中的域名写成不带端口的格式,再用hostname去匹配。

如果需要获取完整的访问地址，比如用于分享链接，可以用host或origin，但要注意，如果用户通过非标准端口访问，host会携带端口,这样分享出去的链接可能无法直接访问。

关于默认端口

浏览器对于80和443端口会自动隐藏，所以host和hostname在大多数情况下看起来一样，但如果你在本地起了一个http服务，端口是8080，host就会显示localhost:8080，而hostname还是localhost，如果你用hostname拼接接口，可能会因为端口不对导致请求失败,所以需要区分。

获取完整URL中的域名（不带端口）

如果你从一个URL字符串中取域名，且不想带端口，直接用URL对象的hostname属性即可，也可以先用正则从字符串中提取域名部分，但正则容易出错，而且不同URL格式差异大,推荐用内置的URL构造函数。

function getDomainFromUrl(urlString) {
  try {
    return new URL(urlString).hostname;
  } catch (e) {
    return null; // 非法URL
  }
}

js 获取当前域名并对比子域名

很多场景需要对比两个域名是否属于同一个主站，或者判断当前页面是否在子域名下，这类需求经常出现在js 域名对比的逻辑中。

提取主域名

从完整域名中取出主域名，比如www.blog.example.com

的主域名是example.com，方法很简单：取域名最后两段，但要注意点分十进制的IP地址不能这样处理，以及co.uk这类二级后缀（如example.co.uk），对于普通场景,可以用split取最后两段。

function getMainDomain(hostname) {
  const parts = hostname.split('.');
  // 简单处理：取最后两段，但忽略IP地址
  if (parts.length >= 2 && /^d+$/.test(parts[parts.length - 1]) === false) {
    return parts.slice(-2).join('.');
  }
  return hostname; // 如果是IP或本地域名，直接返回
}

判断是否同域

跨域判断用origin最准确，但如果你只关心域名部分，可以对比hostname，比如父页面和iframe需要通信，但端口一样,直接对比hostname即可。

if (window.location.hostname === iframe.contentWindow.location.hostname) {
  // 同域，可以操作DOM
}

处理子域名逻辑

当用户从www.example.com访问时，需要跳转到m.example.com，可以用hostname替换子域名，但要注意，如果当前域名是www.example.com，直接替换www为m即可；如果当前域名是example.com，则需要直接拼接m.example.com。

function switchToMobileDomain(hostname) {
  if (hostname.startsWith('www.')) {
    return 'm.' + hostname.slice(4);
  }
  return 'm.' + hostname;
}

业内专家指出，在跨域场景下，对比hostname比对比origin更安全，因为origin会暴露协议，如果页面通过http和https混合访问，origin对比会失效，而hostname只关心域名部分,容错性更强。

js 取域名在实际项目中的应用场景

前端工程中，取域名不是一个孤立的操作，它往往嵌入在更复杂的业务逻辑里，下面列举几个常见场景,看看怎么用这些方法。

单点登录域名判断

SSO登录时，需要根据当前域名跳转到对应的认证中心，如果当前域名是app.example.com，认证中心可能是login.example.com，通过hostname可以判断当前域名是否属于example.com,从而决定走哪个登录流程。

const currentDomain = window.location.hostname;
if (currentDomain.endsWith('.example.com') || currentDomain === 'example.com') {
  // 属于同一站点，使用统一认证
}

资源加载路径动态拼接

CDN资源通常会和域名挂钩，比如图片服务器是img.example.com，API服务器是api.example.com，在开发环境下，这些域名可能指向本地或测试环境，通过获取当前页面的hostname,可以动态替换资源路径。

const apiBase = window.location.hostname === 'localhost' 
  ? 'http://localhost:3000/api' 
  : `https://api.${window.location.hostname}`;

跨域设置document.domain

老式跨域方案中，主域名相同的页面可以通过设置document.domain来实现跨域通信，比如a.example.com和b.example.com，都需要设置document.domain = 'example.com'，此时需要先获取主域名,然后赋值。

document.domain = getMainDomain(window.location.hostname);

需要注意的是，这种方法已逐渐被废弃,现代浏览器更推荐使用postMessage。

js 取域名常见问题解答

Q: js 获取域名时带端口怎么办？

A: 使用location.hostname可以获取不带端口的域名，如果已经拿到一个带端口的字符串，比如www.example.com:8080，可以用split(‘:’)[0]提取域名部分，或者用new URL(url).hostname，如果当前页面是带端口的,直接用hostname即可。

Q: js 获取主域名的方法有哪些？

A: 主流方法是取hostname的最后两段，但要考虑IP地址和特殊后缀（如com.cn），对于常规域名，可以直接用split限定长度，更严谨的做法是维护一个公共后缀列表，或者使用第三方库如psl，在大多数项目中,取最后两段就够用了。

Q: js 取域名在localhost下如何测试？

A: localhost本身就是一个域名，hostname返回localhost，如果你需要模拟各种子域名，可以修改hosts文件，将0.0.1映射到test.example.com，这样浏览器访问test.example.com时会解析到本地，hostname也会返回test.example.com，另一种方法是使用URL对象,在测试代码中直接传入字符串来模拟不同域名。

JavaScript取域名最推荐使用location.hostname，它返回纯粹的域名，不掺杂端口和协议，在需要解析外部URL时，优先使用new URL()构造函数，避免手写正则，根据不同场景结合host、origin或自定义提取函数，就能应对绝大多数需求。