用js怎么获取当前页面的地址

用JavaScript获取当前页面的地址

在JavaScript中，获取当前页面的地址非常简单，可以使用window.location对象来实现。window.location.href、window.location.pathname、window.location.hostname等属性可以分别获取完整URL、路径名和主机名。window.location对象提供了多种方法来获取和操作URL信息。接下来，我们将详细讨论这些属性和方法，并给出一些实际的代码示例。

一、window.location对象的基本属性

1. window.location.href

window.location.href 属性用于获取或设置当前页面的完整URL。它是最常用的属性，因为它包含了页面的全部信息，包括协议、主机名、端口号（如果有）、路径名和查询字符串。

let currentURL = window.location.href;

console.log(currentURL);

2. window.location.pathname

window.location.pathname 属性返回URL中的路径部分，不包括协议、主机名和查询字符串。它通常用于获取页面在服务器上的具体位置。

let pathName = window.location.pathname;

console.log(pathName);

3. window.location.hostname

window.location.hostname 属性返回URL中的主机名部分，不包括协议和路径名。它通常用于获取网站的域名。

let hostName = window.location.hostname;

console.log(hostName);

4. window.location.protocol

window.location.protocol 属性返回URL中的协议部分，包括冒号（如“http:”或“https:”）。它通常用于判断当前页面是通过HTTP还是HTTPS协议访问的。

let protocol = window.location.protocol;

console.log(protocol);

5. window.location.port

window.location.port 属性返回URL中的端口号部分。如果URL中没有指定端口号，则返回一个空字符串。

let port = window.location.port;

console.log(port);

6. window.location.search

window.location.search 属性返回URL中的查询字符串部分，包括问号（“?”）。它通常用于获取页面的查询参数。

let queryString = window.location.search;

console.log(queryString);

二、window.location对象的常用方法

1. window.location.assign()

window.location.assign() 方法用于加载新的文档。它与设置window.location.href的效果相同，但更加明确地表示这是一个重定向操作。

window.location.assign("https://www.example.com");

2. window.location.replace()

window.location.replace() 方法也用于加载新的文档，但它不会在浏览器的历史记录中创建一个新的记录。这意味着用户无法使用“后退”按钮返回到前一个页面。

window.location.replace("https://www.example.com");

3. window.location.reload()

window.location.reload() 方法用于重新加载当前文档。它可以选择性地强制从服务器重新加载，而不是从缓存中加载。

// 从缓存中重新加载

window.location.reload();
// 强制从服务器重新加载
window.location.reload(true);

三、使用示例

获取并解析查询字符串

有时我们需要获取URL中的查询参数并将其解析为一个对象。下面是一个简单的函数，可以将查询字符串解析为键值对对象：

function getQueryParams() {

  let queryString = window.location.search.slice(1); // 去掉问号
  let params = {};
  if (queryString) {
    queryString.split('&').forEach(pair => {
      let [key, value] = pair.split('=');
      params[decodeURIComponent(key)] = decodeURIComponent(value);
    });
  }
  return params;
}
let queryParams = getQueryParams();
console.log(queryParams);

动态改变URL的查询参数

有时我们需要动态地改变URL中的查询参数而不重新加载页面。我们可以使用URLSearchParams对象来实现这一点：

function updateQueryParams(key, value) {

  let url = new URL(window.location.href);
  url.searchParams.set(key, value);
  window.history.replaceState(null, null, url.toString());
}
// 使用示例
updateQueryParams('page', '2');

四、完整示例

下面是一个完整的示例，展示了如何使用上述方法和属性获取和操作URL信息：

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>URL Example</title>
</head>
<body>
  <script>
    // 获取当前页面的URL
    let currentURL = window.location.href;
    console.log('Current URL:', currentURL);
    // 获取路径名
    let pathName = window.location.pathname;
    console.log('Path Name:', pathName);
    // 获取主机名
    let hostName = window.location.hostname;
    console.log('Host Name:', hostName);
    // 获取协议
    let protocol = window.location.protocol;
    console.log('Protocol:', protocol);
    // 获取端口号
    let port = window.location.port;
    console.log('Port:', port);
    // 获取查询字符串
    let queryString = window.location.search;
    console.log('Query String:', queryString);
    // 解析查询字符串
    function getQueryParams() {
      let queryString = window.location.search.slice(1);
      let params = {};
      if (queryString) {
        queryString.split('&').forEach(pair => {
          let [key, value] = pair.split('=');
          params[decodeURIComponent(key)] = decodeURIComponent(value);
        });
      }
      return params;
    }
    let queryParams = getQueryParams();
    console.log('Query Params:', queryParams);
    // 动态改变URL的查询参数
    function updateQueryParams(key, value) {
      let url = new URL(window.location.href);
      url.searchParams.set(key, value);
      window.history.replaceState(null, null, url.toString());
    }
    // 示例：将查询参数page的值设置为2
    updateQueryParams('page', '2');
  </script>
</body>
</html>

通过上述代码示例，我们可以看到如何在JavaScript中获取和操作当前页面的URL信息。这些方法和属性对于开发者来说非常实用，可以帮助我们实现各种动态页面操作和导航功能。

相关问答FAQs：

1. 用JavaScript如何获取当前页面的地址？

JavaScript提供了window.location对象，可以用来获取当前页面的地址。你可以使用window.location.href属性来获取完整的URL地址，或者使用window.location.pathname属性来获取URL的路径部分。

2. 如何使用JavaScript获取当前页面的地址并将其显示在网页上？

你可以使用以下代码来获取当前页面的地址，并将其显示在网页上：

<script>
  // 获取当前页面的地址
  var currentURL = window.location.href;
  
  // 将地址显示在网页上
  document.getElementById("currentURL").innerHTML = "当前页面的地址是：" + currentURL;
</script>

在上面的代码中，currentURL变量存储了当前页面的地址，然后使用document.getElementById()方法将其显示在网页上。

3. 如何使用JavaScript获取当前页面的域名？

要获取当前页面的域名，你可以使用window.location.hostname属性。下面是一个示例代码：

<script>
  // 获取当前页面的域名
  var currentDomain = window.location.hostname;
  
  // 将域名显示在网页上
  document.getElementById("currentDomain").innerHTML = "当前页面的域名是：" + currentDomain;
</script>

在上面的代码中，currentDomain变量存储了当前页面的域名，然后使用document.getElementById()方法将其显示在网页上。