正文

掌握JavaScript获取当前网页URL的简单方法

/0 浏览量
0411

在网页开发中，获取当前网页的URL是一个基础且常用的操作。JavaScript 提供了多种方法来获取和操作URL。以下是一些简单且实用的方法，帮助你轻松掌握如何在JavaScript中获取当前网页的URL。

1. 使用window.location.href

window.location.href 是获取当前网页URL最直接的方法。它返回的是整个URL，包括协议（如http://或https://）、域名、路径、查询参数等。

// 获取当前网页的URL
var currentUrl = window.location.href;
console.log(currentUrl);

2. 使用window.location.protocol

如果你想获取URL的协议部分（如http或https），可以使用window.location.protocol。

// 获取当前网页的协议
var protocol = window.location.protocol;
console.log(protocol);

3. 使用window.location.host

window.location.host 返回当前网页的域名和端口号。

// 获取当前网页的域名和端口号
var host = window.location.host;
console.log(host);

4. 使用window.location.pathname

window.location.pathname 返回当前网页的路径。

// 获取当前网页的路径
var pathname = window.location.pathname;
console.log(pathname);

5. 使用window.location.search

window.location.search 返回URL中的查询字符串部分。

// 获取当前网页的查询字符串
var search = window.location.search;
console.log(search);

6. 使用window.location.hash

window.location.hash 返回URL中的哈希部分（即锚点）。

// 获取当前网页的哈希
var hash = window.location.hash;
console.log(hash);

7. 动态修改URL

除了获取URL，你也可以使用window.location对象来动态修改URL。例如，如果你想将URL中的查询参数修改为新的值，可以使用如下代码：

// 修改URL的查询参数
window.location.search = "?newParam=value";

或者，如果你想完全替换整个URL，可以使用：

// 完全替换整个URL
window.location.href = "https://www.example.com";

总结

通过以上方法，你可以轻松地在JavaScript中获取和操作当前网页的URL。这些方法简单实用，是每个前端开发者都应该掌握的基本技能。希望这篇文章能帮助你更好地理解如何在JavaScript中处理URL。

-- 展开阅读全文 --