正文

JavaScript获取当前页面URL的简单方法

/0 浏览量
0411

在Web开发中，获取当前页面的URL是一个常见的需求。无论是为了记录用户访问的页面，还是为了根据URL动态改变页面内容，掌握获取URL的方法都是非常重要的。下面，我将详细介绍如何在JavaScript中获取当前页面的URL。

基本方法

JavaScript中获取当前页面的URL非常简单，我们可以使用window.location对象来实现。window.location包含了当前URL的所有信息，以下是一些常用的属性和方法：

1. window.location.href

window.location.href返回当前页面的完整URL，包括协议（如http://或https://）、域名、路径、查询参数等。

console.log(window.location.href); // 输出当前页面的完整URL

2. window.location.pathname

window.location.pathname返回当前页面的路径和文件名。

console.log(window.location.pathname); // 输出当前页面的路径和文件名

3. window.location.search

window.location.search返回URL中的查询字符串部分，即问号（?）后面的内容。

console.log(window.location.search); // 输出查询字符串

4. window.location.hash

window.location.hash返回URL中的锚点部分，即井号（#）后面的内容。

console.log(window.location.hash); // 输出锚点

5. window.location.hostname

window.location.hostname返回当前页面的域名。

console.log(window.location.hostname); // 输出域名

6. window.location.port

window.location.port返回当前页面的端口号。

console.log(window.location.port); // 输出端口号

实际应用

在实际应用中，我们可以根据需要选择合适的属性来获取URL的不同部分。以下是一个简单的示例：

function getCurrentURL() {
  var url = {
    full: window.location.href,
    path: window.location.pathname,
    search: window.location.search,
    hash: window.location.hash,
    hostname: window.location.hostname,
    port: window.location.port
  };
  return url;
}

var currentURL = getCurrentURL();
console.log(currentURL); // 输出当前页面的URL信息

通过以上方法，我们可以轻松地获取当前页面的URL信息，并用于各种实际应用场景。希望这篇文章能帮助你更好地理解JavaScript获取URL的方法。

-- 展开阅读全文 --