JavaScript Window Location

在 JavaScript 中，Window 对象的 location 属性用于获取或设置窗口的当前 URL。这个对象提供了许多与浏览器地址栏有关的信息，同时也允许你对当前 URL 进行操作。

以下是一些与 Window 对象的 location 属性相关的常见用法：

1. 获取当前 URL

window.location.href: 获取当前页面的完整 URL。

window.location.protocol: 获取 URL 的协议部分（如 "http:"）。

window.location.host: 获取 URL 的主机部分（包括端口号）。

window.location.hostname: 获取 URL 的主机名部分。

window.location.port: 获取 URL 的端口号。

window.location.pathname: 获取 URL 的路径部分。

window.location.search: 获取 URL 的查询参数部分（以 "?" 开头的部分）。

window.location.hash: 获取 URL 的片段标识符部分（以 "#" 开头的部分）。

console.log(window.location.href);      // 输出: 当前页面的完整 URL
console.log(window.location.protocol);   // 输出: URL 的协议部分
console.log(window.location.host);       // 输出: URL 的主机部分（包括端口号）
console.log(window.location.hostname);   // 输出: URL 的主机名部分
console.log(window.location.port);       // 输出: URL 的端口号
console.log(window.location.pathname);   // 输出: URL 的路径部分
console.log(window.location.search);     // 输出: URL 的查询参数部分
console.log(window.location.hash);       // 输出: URL 的片段标识符部分

2. 设置当前 URL

可以通过给 window.location 的属性赋值的方式来修改当前页面的 URL：

// 修改当前页面的协议为 https
window.location.protocol = 'https:';

// 修改当前页面的主机名和端口号
window.location.host = 'www.example.com:8080';

// 修改当前页面的路径
window.location.pathname = '/new-path';

// 修改当前页面的查询参数
window.location.search = '?param1=value1&param2=value2';

// 修改当前页面的片段标识符
window.location.hash = '#section1';

3. 重定向和导航

Window 对象的 location 属性还提供了一些方法，用于重定向和导航到新的 URL：

window.location.assign(url): 加载指定的 URL。

window.location.replace(url): 用新的 URL 替换当前页面，不会在浏览器历史记录中留下记录。

window.location.reload(forceReload): 重新加载当前页面，如果参数 forceReload 为 true，则强制从服务器重新加载，否则可能从缓存中加载。

// 加载新的 URL
window.location.assign('https://www.newurl.com');

// 用新的 URL 替换当前页面
window.location.replace('https://www.example.com');

// 重新加载当前页面
window.location.reload();

4. 获取 URL 查询参数

可以使用以下函数来获取 URL 查询参数的值：

function getQueryParam(name) {
  // 从 window.location.search 中提取查询参数
  var queryString = window.location.search.substring(1);
  var params = queryString.split('&');
  
  for (var i = 0; i < params.length; i++) {
    var pair = params[i].split('=');
    if (pair[0] === name) {
      return pair[1];
    }
  }

  return null;
}

// 示例
var paramValue = getQueryParam('param1');
console.log(paramValue);  // 输出: 查询参数 'param1' 的值

以上是关于 JavaScript 中 Window 对象的 location 属性的一些常见用法。这些属性和方法使你能够方便地获取、设置和操作当前页面的 URL。

转载请注明出处：http://www.pingtaimeng.com/article/detail/12837/JavaScript