乐闻世界logo
搜索文章和话题

JS 如何获取当前 url

JavaScript
1 年前提问
8 个月前修改
浏览次数158次

6个答案

1
2
3
4
5
6

要使用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，然后解析这些参数。

2024年6月29日 12:07 回复

使用：

shell
window.location.href

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

shell
document.URL

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

2024年6月29日 12:07 回复

URL信息访问

JavaScript 为您提供了许多方法来检索和更改显示在浏览器地址栏中的当前 URL。所有这些方法都使用Locationobject，它是对象的属性Window。您可以Location通过以下方式读取当前对象window.location：

shell
var currentLocation = window.location;

基本 URL 结构

shell
<protocol>//<hostname>:<port>/<pathname><search><hash>

  • **协议：**指定用于访问 Internet 上的资源的协议名称。 （HTTP（不带 SSL）或 HTTPS（带 SSL））

  • **hostname：**主机名指定拥有该资源的主机。例如，www.stackoverflow.com。服务器使用主机名提供服务。

  • **端口：**用于识别 Internet 或其他网络消息到达服务器时要转发到的特定进程的端口号。

  • **路径名：**路径提供有关 Web 客户端想要访问的主机内特定资源的信息。例如，/index.html。

  • **搜索：**查询字符串跟随路径组件，并提供资源可用于某种目的的一串信息（例如，作为搜索参数或作为要处理的数据）。

  • hash： URL 的锚点部分，包括井号 (#)。

通过这些Location对象属性，您可以访问所有这些 URL 组件以及它们可以设置或返回的内容：

  • href - 整个 URL
  • 协议- URL 的协议
  • host - URL 的主机名和端口
  • 主机名- URL 的主机名
  • port - 服务器用于 URL 的端口号
  • pathname - URL 的路径名
  • search - URL 的查询部分
  • hash - URL 的锚点部分
  • 起源——window.location.protocol + '//' + window.location.host
2024年6月29日 12:07 回复

用于对与当前帧关联的位置对象window.location进行读写访问。如果您只想获取只读字符串形式的地址，您可以使用，它应该包含与 相同的值。document.URL``window.location.href

2024年6月29日 12:07 回复

获取当前页面的URL：

shell
window.location.href
2024年6月29日 12:07 回复

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

shell
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。

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

<!DOCTYPE html>
<html>

<body>
  <h2>JavaScript</h2>
  <h3>The window.location.href</h3>
  <p id="root"></p>
</body>

</html>

运行代码片段Hide results

展开片段

顺便提一下这些也不错：

  • 如果您需要相对路径，只需使用window.location.pathname;

  • 如果您想获取主机名，可以使用window.location.hostname;

  • 如果您需要单独获取协议，请使用window.location.protocol

  • 另外，如果您的页面有hash标签，您可以像这样获取它：window.location.hash。

所以window.location.href一次处理所有......基本上：

shell
window.location.protocol + '//' + window.location.hostname + window.location.pathname + window.location.hash === window.location.href;
    //true

window如果已经在窗口范围内，也不需要使用......

因此，在这种情况下，您可以使用：

shell
location.protocol

location.hostname

location.pathname

location.hash

location.href

使用 JavaScript 获取当前 URL

2024年6月29日 12:07 回复

你的答案