JavaScript 中的 Window Location

2025年3月18日 | 阅读 9 分钟

Window.location 用于提供一个 Location 对象，其中包含文档当前位置的详细信息。这个 Location 对象反映了它所链接对象的（URL）位置，即它保存了当前内容位置（主机、href 等）的信息。

JavaScript Location 对象

window.location 属性表示在那个窗口中显示的页面的 URL。

由于 window 位于作用域链的顶部，因此可以无需 window 前缀即可访问 window.location 属性。使用 window 对象的 location 属性，您可以获取页面的 URL、主机名、协议等。

Javascript window.location.href 属性

location 对象的 href 属性包含当前网页的 URL。
通过修改 href 属性，用户可以导航到新的 URL 或页面。
它会在历史记录列表中添加一个条目（这样当用户点击“后退”时，他们可以返回到当前页面）。
更新 href 属性比使用 assign() 函数更快更容易。
调用函数比访问属性慢。

语法

以下语法显示了 javascript windows.href.location 的工作流程。

"window.location.href" 函数用于显示当前的 URL 路径。我们可以看到网站和 html 文件的路径。

示例

以下示例使用 javascript 方法显示窗口位置的 href 值。

示例 1

以下示例显示了正在运行的浏览器上的文件路径。我们可以使用“innerHTML”函数查看窗口位置的 URL 链接。

<!DOCTYPE html>
<html>
<body>
<h3> JavaScript function </h3>
<h4> The javascript window.location.href object </h4>
<p id = "value"> </p>
<script>
document.getElementById("value").innerHTML = 
"The full windows href URL of the page is:<br>" + window.location.href;
</script>
</body>
</html>

输出

给定的输出显示了当前的 URL 链接。

示例 2

以下示例显示了正在运行的浏览器上的文件路径。它使用 onclick 函数和按钮显示当前的 href 链接。我们可以使用警告框查看 URL 链接。

<!DOCTYPE html>
<html>
<body>
<h3> JavaScript function </h3>
<h4> The javascript window.location.href object </h4>
<button onclick = "getLocation()">
Get Href URL
</button>
<script>
function getLocation() {
// Get the current location
var location_var = window.location.href;
alert(location_var);
}
</script>
</body>
</html>

输出

给定的输出使用 javascript 函数显示了当前的 href 链接。

输出 1

输出 2

JavaScript 位置属性

我们可以使用 JavaScript 函数使用窗口位置属性。我们可以获取路径、文件名、端口号以及其他文件和 URL 相关信息。我们可以根据用户需求看到多个函数或方法来获取位置属性。

Location.protocol

JavaScript location.protocol 用于显示给定 URL 的协议方案，包括最后的冒号 (:) 符号。“http:”和“https:”是 JavaScript 中位置协议的示例。

语法

以下语法用于返回 URL 的协议。

网站名称或文件路径名称是所需的协议，此语法用于显示协议。

示例

以下示例显示了 JavaScript 位置协议的其他属性。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location protocol </h2>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<p id = "value"></p>
<script>
function newDocument() {
// Prints protocol such as http: or https:
document.getElementById("value").innerHTML ="URL Path:+window.location.protocol + "<br>";
}
</script>
</body>
</html>

输出

给定的输出显示了 URL 属性值。

JavaScript location host 和 hostname 属性

JavaScript location.host 显示为所需或可用的主机号。JavaScript location.hostname 用于获取所需或可用的主机名。

"localhost:8080" 是 URL 位置主机的一个示例。“www.TpointTech.com”是本地主机名的一个示例。

语法

以下语法用于返回主机值。

以下语法用于返回主机名。

简单的语法用于显示文件路径或 URL 的 localhost。
网站名称或文件路径名称显示为主机名。

示例

以下示例显示了 JavaScript location hostname。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location hostname property </title>
</head>
<body>
<h2> JavaScript Location host and hostname </h2>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<p id = "value"></p>
<p id = "value1"></p>
<script>
function newDocument() {
// Prints host with a usable port such as a localhost:8080
document.getElementById("value").innerHTML = " URL host with port: " +window.location.host + "<br>";
// Prints hostname such as a www.TpointTech.com
document.getElementById("value1").innerHTML = " URL hostname with port: " +window.location.hostname + "<br>";
}
</script>
</body>
</html>

输出

给定的输出显示了 URL 属性值。

JavaScript location port

Javascript location.port 显示可用 URL 的端口号。8080 或 8085 是窗口位置端口的一个示例。

语法

以下语法用于显示 URL 的位置端口。

示例

以下示例显示了 JavaScript location hostname。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location port </h2>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<p id = "value"></p>
<script>
function newDocument() {
         // Prints port number, e.g. 8080
document.getElementById("value").innerHTML = " URL port: " +window.location.port+ "<br>";
}
</script>
</body>
</html>

输出

给定的输出显示了 URL 属性值。

Location.pathname

JavaScript location.pathname 包括一个初始的“/”，后面跟着给定 URL 的路径。“/js/index.html”是位置路径名的一个示例。

语法

以下语法和返回值显示为路径值。

示例

以下示例显示了 JavaScript location pathname。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location Path </h2>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<p id = "value"></p>
<script>
function newDocument() {
       document.getElementById("value").innerHTML = " Path: " +window.location.pathname + "<br>";
}
</script>
</body>
</html>

输出

给定的输出显示了 URL 属性值。

Location.hash

Javascript location.hash 返回一个给定的字符串。它包含一个“#”，后面跟着可用 URL 的片段标识符。

语法

给定的语法用于显示 URL 中包含的哈希值。

示例

以下示例显示了 JavaScript location pathname。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location Hash</h2>
<p><a id="jtp" href="file:///G:/writing%20stuff/content-writing/TpointTech/2022/nov/file.html#seee_hash_data">
JavaScript Location Hash
</a><p>
<p id="value"></p>
<script>
let url_data = document.getElementById("jtp");
document.getElementById("value").innerHTML = "The Hash data of the URL is: " + url_data.hash;
</script>
</body>
</html>

输出

给定的输出显示了 URL 属性值。

Location.origin

Javascript location.origin 是一个字符串，它包含特定位置来源的规范形式。

https://:8080 是 javascript location 的默认示例。

示例

以下示例显示了 JavaScript 位置的来源格式。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location Origin </h2>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<p id = "value"></p>
<script>
function newDocument() {
       document.getElementById("value").innerHTML = "Origin: " +window.location.origin + "<br>";
}
</script>
</body>
</html>

输出

给定的输出显示了 URL 属性值。

Location.username

Javascript location.username 是一个字符串，它包含域名之前的用户名。

"url.username" 用于使用 javascript 获取预定义 URL 值的用户名。

示例

以下示例显示了 JavaScript location username。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location Username</h2>
<p><a id="jtp" href="https://TpointTech:jtp89123@www.TpointTech.com">
JavaScript Location property
</a><p>
<p id="value"></p>
<script>
let url_data = document.getElementById("jtp");
document.getElementById("value").innerHTML = "The Username of the URL is: " + url_data.username;
</script>
</body>
</html>

输出

给定的输出显示了 URL 属性值。

Location.password

Javascript location.password 是一个字符串，它显示域名之前指定的密码。

示例

以下示例显示了 JavaScript location password。

!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location Password</h2>
<p><a id="jtp" href="https://TpointTech:jtp89123@www.TpointTech.com">
JavaScript Location property
</a><p>
<p id="value"></p>
<script>
let url_data = document.getElementById("jtp");
document.getElementById("value").innerHTML = "The password of the URL is: " + url_data.password;
</script>
</body>
</html>

输出

给定的输出显示了 URL 属性值。

Location.search

Javascript location.search 是一个字符串，它显示给定 URL 的查询字符串。

"?type=listing&answer=no"

示例

以下示例显示了 JavaScript location password。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location Search</h2>
<p><a id="jtp" href="https://TpointTech:jtp89123@www.TpointTech.com/?yes">
JavaScript Location property
</a><p>
<p id="value"></p>
<script>
let url_data = document.getElementById("jtp");
document.getElementById("value").innerHTML = "The Location search of the URL is: " + url_data.search;
</script>
</body>
</html>

输出

给定的输出显示了 URL 属性值。

位置属性示例

以下示例显示了 JavaScript location 的所有属性。在这里，我们可以使用 javascript 函数查看文件路径的所有位置属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location property </h2>
    <h3> The window.location assign object </h3>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<script>
function newDocument() {
    // Prints complete file URL
    document.write(" full url path: " +window.location.href + "<br>");
    // Prints protocol such as http: or https:
    document.write(" URL Path: <br>" +window.location.protocol + "<br>"); 
    // Prints hostname with a usable port such as a localhost:8080
    document.write(" URL hostname with port: " +window.location.host + "<br>");  
    // Prints hostname such as localhost or www.TpointTech.com
    document.write(" url hostname: " +window.location.hostname + "<br>");
     // Prints port number, e.g. 8080
    document.write(" port: " +window.location.port + "<br>");
     // Prints pathname 
    document.write(" url pathname: " +window.location.pathname + "<br>"); 
     // Prints query string 
    document.write(" full url search: " +window.location.search + "<br>");
    // Prints fragment identifier
    document.write(" full url identifier: " +window.location.hash);
}
    </script>
    </body>
</html>

输出

给定的输出显示了 URL 属性值。

操作 JavaScript 位置

位置的操作通过三种方法实现：assign()、reload() 和 replace()。这些方法与 JavaScript 函数和事件一起使用。

JavaScript Assign() 方法

assign() 方法用于获取 URL 并在页面上导航 URL 路径。它用于将 URL 路径添加到浏览器的历史堆栈中。

语法

以下语法用于分配所需的 URL。

"window.location.assign" 函数用于获取所需的 URL 路径。
我们可以放置文件或网站的路径或 URL 链接。

示例

给定示例分配了给定和所需的 URL。在这里，我们可以使用带有 onclick 函数的按钮来显示分配的 URL。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript location method </h2>
<h3> The window.location assign object </h3>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<script>
function newDocument() {
  window.location.assign("https://tpointtech.cn")
}
</script>
</body>
</html>

输出

给定的输出图像显示了分配的 URL。

输出 1

Javascript replace() 方法

replace() 模式与 assign() 相关，只是它不创建新的历史堆栈条目。因此，您不能使用后退按钮返回。此函数显示旧 URL 中的新 URL 或替换的 URL。

语法

以下语法用于替换所需的 URL。

"window.location.replace" 函数用于获取新的 URL 路径。
我们可以使用简单的 javascript 方法将路径或 URL 链接从旧的替换为新的。

示例

给定示例替换了给定所需的 URL。在这里，我们可以使用带有 onclick 函数的按钮从旧 URL 获取新 URL。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript location method </h2>
<h3> The window.location replace object </h3>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<script>
function newDocument() {
  window.location.replace("https://tpointtech.cn")
}
</script>
</body>
</html>

输出

给定的输出图像显示了替换的 URL。

输出 1

Javascript reload() 方法

reload() 方法用于重新加载页面。当您不带参数调用 reload() 时，浏览器以最有效的方式重新加载页面，如果页面资源自上次请求以来没有更改，则从缓存加载它们。

语法

以下语法用于重新加载所需的 URL。

location.reload() 函数重新加载 URL 并显示一个空白页面。
它不需要任何文件路径或当前 URL。

示例

给定示例重新加载了给定所需的 URL。我们可以使用 javascript onclick 函数重新加载页面。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript location method </h2>
<h3> The location.reload object </h3>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<script>
function newDocument() {
location.reload();
}
</script>
</body>
</html>

输出

给定的输出显示了重新加载的 URL。

总结

location 对象包含页面的 URL。它可以使用 window.location 或 document.location 访问。

Location 对象具有表示 URL 的特性，例如 protocol、pathname、host 和 search。要操作位置，请设置其属性并使用 assign()、replace() 和 reload()。

下一主题JavaScript 免费认证

JavaScript 中的 Window Location

JavaScript Location 对象

Javascript window.location.href 属性

JavaScript 位置属性

位置属性示例

操作 JavaScript 位置

总结

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 中的 Window Location

JavaScript Location 对象

Javascript window.location.href 属性

JavaScript 位置属性

位置属性示例

操作 JavaScript 位置

总结

相关帖子

JavaScript classList

JavaScript 代码编辑器

JavaScript windows getComputedStyle() 方法

在 JavaScript 中按下和释放鼠标左键

JavaScript 中的随机字符串生成器

如何使用 JavaScript 获取 PI 的值

JavaScript onwheel 鼠标事件

如何调试 JavaScript

JavaScript change 事件

Javascript previousElementSibling 属性

订阅 Tpoint Tech