如何在 JavaScript 中获取包含当前 URL 参数的对象?
JavaScript 是一种多功能脚本语言，可以以多种方式使用。其中一种方法是使用它来获取有关当前 URL 的信息。这在许多情况下都很有用，例如当您想要创建书签或当您想要将用户重定向到特定页面时。
使用位置对象
获取有关当前 URL 的信息的最简单方法是使用 Location 对象。此对象是窗口对象的属性，包含有关当前 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 的信息。我们还了解了如何使用查询字符串参数及其值创建对象。
