window.location使用总结

在 JavaScript 中获取当前页面的 URL 有多种方法，根据你需要的具体信息可以选择不同的属性。以下是一些常用方法，配合详细说明：

1. 使用 window.location

window.location 是一个包含当前页面 URL 的对象，你可以通过它的属性获取 URL 的不同部分：

示例代码：

// 获取完整的当前页面 URL
const fullUrl = window.location.href;
console.log('完整的 URL:', fullUrl);

// 获取协议（例如 http 或 https）
const protocol = window.location.protocol;
console.log('协议:', protocol);

// 获取主机名（例如 www.example.com）
const hostname = window.location.hostname;
console.log('主机名:', hostname);

// 获取端口号（如果没有设置则为空字符串）
const port = window.location.port;
console.log('端口:', port);

// 获取路径（例如 /path/page.html）
const pathname = window.location.pathname;
console.log('路径:', pathname);

// 获取查询参数（例如 ?key=value&key2=value2）
const search = window.location.search;
console.log('查询参数:', search);

// 获取哈希部分（例如 #section）
const hash = window.location.hash;
console.log('哈希:', hash);

输出示例：

假设当前页面的 URL 是：

https://www.example.com:8080/path/page.html?key=value&key2=value2#section

那么代码的输出将是：

完整的 URL: https://www.example.com:8080/path/page.html?key=value&key2=value2#section
协议: https:
主机名: www.example.com
端口: 8080
路径: /path/page.html
查询参数: ?key=value&key2=value2
哈希: #section

---

2. 使用 document.URL

document.URL 可以直接获取完整的 URL，和 window.location.href 类似。

示例代码：

const url = document.URL;
console.log('页面 URL:', url);

注意：

document.URL 是只读的，无法通过修改它来改变页面的 URL。

---

3. 获取查询参数中的具体值

如果你只想获取查询参数中的某个具体值，可以用以下方法解析查询参数：

示例代码：

// 创建一个 URLSearchParams 对象
const params = new URLSearchParams(window.location.search);

// 获取参数值
const keyValue = params.get('key');
console.log('查询参数 key 的值:', keyValue);

输出示例：

如果 URL 是：

https://www.example.com/path?page=1&key=value

输出将是：

查询参数 key 的值: value

---

4. 兼容性考虑

• 以上方法在现代浏览器中都支持，但如果需要兼容非常旧的浏览器（如 IE），建议使用 Polyfill。
• URLSearchParams 是现代浏览器的 API，IE 不支持，可以用手动解析 search 的方式代替。

手动解析查询参数示例：

function getQueryParam(param) {
  const query = window.location.search.substring(1); // 去掉问号
  const vars = query.split('&');
  for (let i = 0; i < vars.length; i++) {
    const pair = vars[i].split('=');
    if (decodeURIComponent(pair[0]) === param) {
      return decodeURIComponent(pair[1]);
    }
  }
  return null;
}

const value = getQueryParam('key');
console.log('key 的值:', value);