window.location.hostname 属性返回当前页面的主机名，即 URL 中的域名部分。它不包括协议（如 http://或 https://）、端口号、路径、查询字符串或哈希部分。

基本语法：

let hostname = window.location.hostname;

返回值：

  • 字符串：返回当前 URL 中的主机名部分（即域名），不包括协议和端口号。

示例：

假设当前页面的 URL 为：

https://www.example.com:8080/path?name=JohnDoe#section1

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

如果页面的 URL 中没有端口号（例如默认的 80 或 443），返回值仍然是域名部分：

https://www.example.com/path

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

与其他 window.location 属性的对比：

  • window.location.host：返回主机名和端口号（如果存在），例如 www.example.com:8080。
  • window.location.port：仅返回端口号（如果存在），如果没有指定端口，则返回空字符串 ""。
  • window.location.origin：返回协议、主机名和端口（如果有），例如 https://www.example.com:8080。

用途：

  • 获取当前页面的域名：当需要动态获取当前页面的域名时，window.location.hostname 可以提供该信息。
  • 构建绝对 URL：如果你需要根据当前页面的域名构建新的 URL，可以使用 hostname。

示例：构建动态的 API 请求 URL

假设你需要根据当前页面的域名生成一个 API 请求的 URL：

let hostname = window.location.hostname;  // "www.example.com"
let apiUrl = `https://${hostname}/api/v1/resource`;
console.log(apiUrl);  // 输出: "https://www.example.com/api/v1/resource"

总结：

  • window.location.hostname 返回当前页面的域名部分，不包含协议和端口号。
  • 它可以用于动态构建 URL 或获取当前页面的主机信息，尤其在处理跨站请求或生成与当前站点相关的 URL 时非常有用。

如果你有更具体的需求，或者想了解如何在实际项目中应用该属性，随时告诉我！