正文

学会JS获取当前网页URL：轻松掌握获取URL全路径的技巧

/0 浏览量
0607

在Web开发中，获取当前网页的URL是一个常见的操作，它可以帮助开发者进行页面跳转、数据提交或是根据URL进行不同的页面处理。JavaScript 提供了多种方法来获取当前网页的URL。下面，我们就来详细探讨一下如何使用JavaScript获取当前网页的URL全路径。

1. 使用 window.location 对象

JavaScript 提供了 window.location 对象，这个对象包含了浏览器当前加载页面的信息。以下是如何使用它来获取URL的示例：

// 获取整个URL
var fullUrl = window.location.href;

// 获取协议（例如 http 或 https）
var protocol = window.location.protocol;

// 获取主机名和端口号（例如 www.example.com:8080）
var hostname = window.location.hostname;
var port = window.location.port;

// 获取域名（不包括端口号）
var domain = window.location.host;

// 获取路径和查询字符串
var path = window.location.pathname;
var search = window.location.search;

通过以上代码，你可以分别获取到URL的各个组成部分。

2. 使用 document.URL

document.URL 属性会返回当前文档的完整URL，包括协议、域名、路径等。它等同于 window.location.href。

var fullUrl = document.URL;

3. 使用 window.location.pathname

如果你只想获取URL中的路径部分，可以使用 window.location.pathname。

var path = window.location.pathname;

4. 使用 window.location.search

要获取URL中的查询字符串部分，可以使用 window.location.search。

var query = window.location.search;

5. 实际应用案例

假设我们想要根据URL的查询字符串来处理一些逻辑，下面是一个简单的例子：

// 获取查询参数
function getQueryParam(param) {
  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] == param) {
      return pair[1];
    }
  }
  return null;
}

// 使用示例
var userId = getQueryParam("userId");
console.log(userId); // 输出查询参数的值

在这个例子中，我们定义了一个函数 getQueryParam 来解析查询字符串并获取指定的参数值。

6. 注意事项

  • 确保在使用这些方法时页面已经加载完成。
  • 如果你在HTTPS页面上使用这些方法，确保你了解浏览器的同源策略，因为跨域请求可能会受到限制。

通过以上方法，你可以轻松地在JavaScript中获取当前网页的URL。掌握这些技巧，可以帮助你在Web开发中更加高效地处理URL相关的操作。

-- 展开阅读全文 --