js 获取当前地址栏url|极客笔记

js 获取当前地址栏url

在前端开发中，我们经常需要获取当前页面的地址栏URL信息。这个信息可以用来做很多事情，比如根据不同的URL参数来展示不同的内容，或者用来做页面间的跳转等操作。本文将介绍如何使用JavaScript来获取当前地址栏URL的方法。

window.location

在JavaScript中，可以使用window.location对象来获取当前页面的地址栏信息。window.location对象有很多属性，其中最常用的是href属性，它包含了完整的URL信息。

下面是一个简单的示例代码，演示如何使用window.location.href来获取当前页面的URL：

// 获取当前页面的URL
var currentURL = window.location.href;
console.log(currentURL);

运行上面的代码，将会打印出当前页面的完整URL信息。例如，如果当前页面的URL是https://example.com/index.html?name=John&age=30，那么打印出来的URL就会是https://example.com/index.html?name=John&age=30。

解析URL参数

除了获取完整的URL信息外，有时候我们还需要解析URL中的参数信息。URL参数通常以?开头，不同参数之间用&分隔。我们可以使用JavaScript的一些方法来解析这些URL参数。

下面是一个示例代码，演示如何解析URL中的参数：

// 获取当前页面的URL
var currentURL = window.location.href;

// 解析URL中的参数
function getURLParams(url) {
  var params = {};
  var urlParts = url.split("?");
  if (urlParts.length > 1) {
    var paramsArray = urlParts[1].split("&");
    paramsArray.forEach(function(param) {
      var paramParts = param.split("=");
      params[paramParts[0]] = paramParts[1];
    });
  }
  return params;
}

var urlParams = getURLParams(currentURL);
console.log(urlParams);

运行上面的代码，将会打印出一个包含了URL参数信息的对象。例如，如果当前页面的URL是https://example.com/index.html?name=John&age=30，那么打印出来的对象就会是{ name: "John", age: "30" }。

获取其他URL信息

除了href属性外，window.location对象还包含了其他有用的属性，可以帮助我们获取URL的各种信息。下面列举了一些常用的属性：

protocol: 返回URL的协议部分，例如http:或https:
host: 返回URL的主机部分，例如example.com:8080
hostname: 返回URL的主机名部分，例如example.com
port: 返回URL的端口部分，如果URL中没有指定端口，则返回空字符串
pathname: 返回URL的路径部分，例如/index.html
search: 返回URL的查询部分，包括参数，例如?name=John&age=30
hash: 返回URL的哈希部分，例如#section1

下面是一个示例代码，演示如何获取这些URL信息：

// 获取当前页面的URL
var currentURL = window.location.href;

console.log("Protocol: " + window.location.protocol);
console.log("Host: " + window.location.host);
console.log("Hostname: " + window.location.hostname);
console.log("Port: " + window.location.port);
console.log("Pathname: " + window.location.pathname);
console.log("Search: " + window.location.search);
console.log("Hash: " + window.location.hash);

运行上面的代码，将会打印出当前页面的各种URL信息。例如，如果当前页面的URL是https://example.com:8080/index.html?name=John#section1，那么打印出来的信息将会如下所示：

Protocol: https:
Host: example.com:8080
Hostname: example.com
Port: 8080
Pathname: /index.html
Search: ?name=John
Hash: #section1

通过以上介绍，我们可以看到如何使用JavaScript来获取当前地址栏URL，并解析其中的参数信息。这些方法在前端开发中非常有用，可以帮助我们实现各种功能和交互。

js 获取当前地址栏url