JS 如何获取当前 url

要使用JavaScript获取当前页面的URL，您可以使用 window.location 对象，它包含了与当前窗口的位置相关的信息。下面是获取当前URL的一些属性和方法：

1. window.location.href ：返回完整的URL字符串（即它包含协议、主机、端口号（如果有）、路径、查询字符串、锚点等）。

例如，假设当前URL是 "https://www.example.com:80/path/index.html?search=test#section1"，您可以这样获取完整的URL：

javascript
var currentUrl = window.location.href;
console.log(currentUrl); // 输出："https://www.example.com:80/path/index.html?search=test#section1"

1. window.location.hostname ：返回web服务器的域名。

例如：

javascript
var hostname = window.location.hostname;
console.log(hostname); // 输出："www.example.com"

1. window.location.pathname：返回URL的路径部分。

例如：

javascript
var pathname = window.location.pathname;
console.log(pathname); // 输出："/path/index.html"

1. window.location.protocol：返回页面使用的协议，通常是http:或https:。

例如：

javascript
var protocol = window.location.protocol;
console.log(protocol); // 输出："https:"

1. window.location.port：返回服务器端口号。

例如：

javascript
var port = window.location.port;
console.log(port); // 输出："80"

1. window.location.search：返回URL的查询字符串部分，以"?"开头。

例如：

javascript
var search = window.location.search;
console.log(search); // 输出："?search=test"

1. window.location.hash：返回URL的锚部分，以"#"开头。

例如：

javascript
var hash = window.location.hash;
console.log(hash); // 输出："#section1"

1. window.location.assign(url)：加载新的文档。

2. window.location.reload()：重新加载当前页面。

3. window.location.replace(url)：用新的页面替换当前页面。

使用这些属性和方法，您可以根据需要获取和操作当前页面的URL。例如，如果您需要根据URL的查询字符串参数来执行某些操作，您可以提取 window.location.search，然后解析这些参数。

使用纯 JavaScript 可以轻松获取当前页面的完整 URL 。例如，在此页面上尝试以下代码：

window.location.href; // use it in the console of this page will return // http://stackoverflow.com/questions/1034621/get-current-url-in-web-browser"

该window.location.href属性返回当前页面的 URL。

document.getElementById("root").innerHTML = "The full URL of this page is:" + window.location.href;

使用：

shell
window.location.href

正如评论中所指出的，下面的行可以工作，但在 Firefox 中存在错误。

shell
document.URL

请参阅**DOMString 类型的 URL，readonly**。

获取当前页面的URL：

shell
window.location.href