通过JavaScript获取当前页面的链接地址非常简单，关键方法有：window.location.href、document.URL、window.location。其中window.location.href最常用，适用于大部分情况。
window.location.href 是 JavaScript 中获取当前页面完整 URL 的最常用方法。它不仅可以获取当前页面的 URL，还可以用来重定向页面。例如：
let currentURL = window.location.href;
console.log(currentURL);
一、WINDOW.LOCATION.HREF
window.location.href 是获取当前页面 URL 的最常用方法之一。它不仅可以读取当前页面的 URL，还可以用来设置新的 URL 以重定向页面。
1、获取当前页面 URL
要获取当前页面的 URL，只需直接访问 window.location.href 属性：
let currentURL = window.location.href;
console.log(currentURL);
这将返回一个字符串，包含当前页面的完整 URL。例如，如果当前页面的 URL 是 https://www.example.com/path/page.html?query=123#fragment，则 currentURL 将为这个字符串。
2、重定向页面
window.location.href 还可以用来重定向页面，只需将其设置为一个新的 URL 即可：
window.location.href = 'https://www.newpage.com';
这将立即将浏览器重定向到新的 URL。
二、DOCUMENT.URL
document.URL 是另一种获取当前页面 URL 的方法，但它并不像 window.location.href 那样常用。它主要用于读取当前页面的 URL。
1、获取当前页面 URL
获取当前页面的 URL 同样非常简单：
let currentURL = document.URL;
console.log(currentURL);
与 window.location.href 类似，它也会返回一个字符串，包含当前页面的完整 URL。
2、使用场景
document.URL 通常用于需要只读访问当前页面 URL 的场景，而不涉及页面重定向。
三、WINDOW.LOCATION
window.location 是一个包含当前页面 URL 信息的对象。它不仅可以获取完整的 URL，还可以获取 URL 的各个部分，如协议、主机名、路径名等。
1、获取完整 URL
可以使用 window.location.href 来获取完整的 URL：
let currentURL = window.location.href;
console.log(currentURL);
2、获取 URL 的各个部分
window.location 对象包含多个属性，可以分别获取 URL 的各个部分：
protocol: 获取 URL 的协议部分（如 http: 或 https:）
hostname: 获取 URL 的主机名（如 www.example.com）
pathname: 获取 URL 的路径部分（如 /path/page.html）
search: 获取 URL 的查询字符串部分（如 ?query=123）
hash: 获取 URL 的片段标识符部分（如 #fragment）
例如：
let protocol = window.location.protocol;
let hostname = window.location.hostname;
let pathname = window.location.pathname;
let search = window.location.search;
let hash = window.location.hash;
console.log(protocol); // 输出: "https:"
console.log(hostname); // 输出: "www.example.com"
console.log(pathname); // 输出: "/path/page.html"
console.log(search); // 输出: "?query=123"
console.log(hash); // 输出: "#fragment"
四、实践应用
了解如何获取当前页面 URL 后，可以将其应用于各种实际场景中，如页面导航、参数解析等。
1、页面导航
可以使用 window.location.href 来实现页面导航功能。例如，根据用户的选择跳转到不同的页面：
function navigateTo(page) {
window.location.href = `https://www.example.com/${page}`;
}
navigateTo('about'); // 跳转到 https://www.example.com/about
2、解析查询字符串参数
可以使用 window.location.search 来解析 URL 中的查询字符串参数。常见的做法是将查询字符串解析为一个对象：
function getQueryParams() {
let search = window.location.search.substring(1);
let params = {};
search.split('&').forEach(param => {
let [key, value] = param.split('=');
params[key] = decodeURIComponent(value);
});
return params;
}
let queryParams = getQueryParams();
console.log(queryParams); // 输出: { query: "123" }
3、处理片段标识符
可以使用 window.location.hash 来处理 URL 中的片段标识符。例如，根据片段标识符的变化更新页面内容：
window.addEventListener('hashchange', function() {
let hash = window.location.hash.substring(1);
updateContent(hash);
});
function updateContent(hash) {
// 根据 hash 值更新页面内容
console.log(`Updating content for ${hash}`);
}
updateContent(window.location.hash.substring(1)); // 初始更新
五、注意事项
在使用这些方法时，有一些注意事项需要牢记。
1、浏览器兼容性
大多数现代浏览器都支持 window.location.href、document.URL 和 window.location，但某些旧版浏览器可能存在兼容性问题。在开发前应检查目标浏览器的支持情况。
2、安全性
在处理 URL 时，尤其是在解析查询字符串和片段标识符时，应注意安全性问题。例如，应对用户输入进行适当的编码和解码，防止 XSS 攻击。
3、性能
频繁操作 window.location 属性（如频繁重定向页面）可能会影响性能。应尽量减少不必要的页面重定向操作。
六、总结
JavaScript 提供了多种方法来获取当前页面的链接地址，其中最常用的是 window.location.href。除了获取完整 URL，还可以使用 window.location 对象的其他属性来获取 URL 的各个部分。在实际应用中，这些方法可以用于页面导航、参数解析和片段标识符处理等场景。在使用过程中，应注意浏览器兼容性、安全性和性能问题，以确保代码的可靠性和安全性。
相关问答FAQs：
1. 问题：如何使用JavaScript获取当前页面的链接地址？答：您可以使用JavaScript中的window.location.href属性来获取当前页面的链接地址。这个属性返回一个字符串，包含了当前页面的完整链接地址。
2. 问题：如何使用JavaScript获取当前页面的域名？答：您可以使用JavaScript中的window.location.hostname属性来获取当前页面的域名。这个属性返回一个字符串，包含了当前页面的域名部分。
3. 问题：如何使用JavaScript获取当前页面的路径？答：您可以使用JavaScript中的window.location.pathname属性来获取当前页面的路径。这个属性返回一个字符串，包含了当前页面的路径部分，但不包括域名和参数部分。
文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3712034