如何在 JavaScript 中获取包含当前 URL 参数的对象？

JavaScript 是一种用途广泛的脚本语言，可以以多种方式使用。其中一种方法是使用它来获取有关当前 URL 的信息。这在许多情况下都很有用，例如当您想要创建书签或将用户重定向到特定页面时。

使用 Location 对象

获取有关当前 URL 信息的最简单方法是使用 **Location** 对象。此对象是 window 对象的一个属性，包含有关当前 **URL** 的信息。要使用它，只需使用要访问的属性的名称来调用该对象即可。例如，要获取 **href** 属性，可以使用 -

var currentURL = window.location.href;

这将返回整个 URL，包括协议 **(http:// 或 https://)**、主机名、路径和查询字符串。

如果您只需要路径，可以使用 Location 对象的 pathname 属性 -

var currentPath = window.location.pathname;

这将返回主机名之后的所有内容，包括查询字符串。

使用 document.URL 属性

获取有关当前 URL 信息的另一种方法是使用 **document.URL** 属性。此属性包含当前页面的整个 URL。要使用它，只需调用 -

var currentURL = document.URL;

这将返回整个 URL，包括协议 (http:// 或 https://)、主机名、路径和查询字符串

使用 document.location 属性

获取有关当前 URL 信息的另一种方法是使用 **document.location** 属性。此属性包含一个包含有关当前 URL 信息的对象。要使用它，只需调用 -

var currentURL = document.location;

这将返回一个包含有关当前 URL 信息的对象。该对象将具有协议 (http:// 或 https://)、主机名、路径和查询字符串的属性。

示例

获取用户输入 URL 参数的 HTML 代码

以下是您可以用来获取用户输入 URL 参数的完整 HTML 代码。您还可以在本节末尾找到一个可运行的演示。创建一个包含以下代码的 HTML 文件，并在任何浏览器中打开它。

<html>
<head>
      <title>Get URL Parameters</title>
</head>
<body>
   <h1>Get URL Parameters</h1>
   <p>
      Enter a URL in the input field below and click on the "Get Parameters" button.
   </p>
   <form>
      <input type="text" id="url" placeholder="Enter a URL.." />
      <input type="button" id="submit" value="Get Parameters" />
   </form>
   <div id="output"></div>
   <script>
      function getParams() {
         
         // Get the URL with the query string from the input
         var url = document.getElementById('url').value;

         // Create an object with the query string parameters and their values
         var params = {};
         var parser = document.createElement('a');
         parser.href = url;
         var query = parser.search.substring(1);
         var vars = query.split('&');
         for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split('=');
            params[pair[0]] = decodeURIComponent(pair[1]);
         }

         // Display the query string parameters on the page
         var output = '';
         for (var param in params) {
            if (params.hasOwnProperty(param)) {
               output += '<p>' + param + ': ' + params[param] + '</p>';
            }
         }
         document.getElementById('output').innerHTML = output;
      }

      // Add event listener
      document.getElementById('submit').addEventListener('click', getParams);
   </script>
</body>
</html>

在上面的代码中，我们有一个输入字段和一个按钮。当用户在输入字段中输入 URL 并点击“获取参数”按钮时，我们将调用 **getParams()** 函数。

此函数创建一个包含查询字符串参数及其值的对象。然后它在页面上显示查询字符串参数。

您还可以看到我们为按钮的“click”事件添加了一个事件监听器。这样，当点击按钮时，就会调用我们的 *getParams()* 函数。

在本教程中，我们学习了如何使用 JavaScript 获取有关当前 URL 的信息。我们还学习了如何创建一个包含查询字符串参数及其值的对象。

在本教程中，我们学习了如何使用 JavaScript 获取有关当前 URL 的信息。我们还学习了如何创建一个包含查询字符串参数及其值的对象。

更新于: 2022年8月4日

1K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.