在JavaScript中，window.location对象提供了一些方法来获取和操作URL，最常用的方法是window.location.search、window.location.hash和window.location.href,它们分别用于获取URL中的查询字符串、哈希值和完整URL，本文将详细介绍这些方法的用法和注意事项。
1. window.location.search
window.location.search属性返回URL中问号(?)后面的部分，即查询字符串，查询字符串通常用于向服务器传递参数，例如搜索关键词、筛选条件等，查询字符串以?开始，后面跟着一个或多个键值对，键值对之间用&符号连接，每个键值对的键和值用=符号连接。
下面是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<title>Query String Example</title>
<script>
function showQueryString() {
var queryString = window.location.search;
alert("查询字符串为：" + queryString);
}
</script>
</head>
<body>
<button onclick="showQueryString()">显示查询字符串</button>
</body>
</html>
当用户点击按钮时，会弹出一个包含查询字符串的警告框，如果当前URL为http://example.com?key=value&anotherKey=anotherValue,则查询字符串为?key=value&anotherKey=anotherValue。
需要注意的是，window.location.search只返回URL中第一个问号后面的部分，如果URL中有多个问号，只有第一个问号后面的部分会被返回，如果需要获取所有的查询参数，可以使用以下方法：
function getQueryParams() {
var queryString = window.location.search;
var params = {};
if (queryString) {
var pairs = queryString.slice(1).split('&');
for (var i = 0; i < pairs.length; i++) {
var pair = pairs[i].split('=');
params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
}
}
return params;
}
这个函数首先去掉查询字符串的第一个字符(即问号),然后使用&符号将其分割成多个键值对，接着，遍历这些键值对，使用=符号将它们分割成键和值，并使用decodeURIComponent函数对它们进行解码，将解码后的键值对添加到结果对象中，并返回该对象。
2. window.location.hash
window.location.hash属性返回URL中井号()后面的部分，即哈希值，哈希值通常用于实现页面内的锚点跳转，在HTML中，可以使用<a href="section1">跳转到第一部分</a>的方式创建锚点，当用户点击链接时，浏览器会自动将URL中的井号及其后面的部分作为哈希值发送给服务器，服务器可以根据这个哈希值找到对应的页面内容。
与查询字符串类似，哈希值也以开头，下面是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<title>Hash Example</title>
<script>
function showHash() {
var hash = window.location.hash;
alert("哈希值为：" + hash);
}
</script>
</head>
<body onhashchange="showHash()">
<h1 id="section1">这是第一部分</h1>
</body>
</html>
当用户访问这个页面时，浏览器会自动将哈希值设置为空(即不带井号)，当用户点击链接跳转到其他部分时，浏览器会将新的哈希值设置为相应的ID(如本例中的section1)，当URL中的哈希值发生变化时，浏览器会触发onhashchange事件，调用showHash()函数显示当前的哈希值，在这个例子中，当用户点击链接跳转到其他部分时，会弹出一个包含新哈希值的警告框。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/147501.html
微信扫一扫 