JavaScript 位置 - JavaScript 教程

摘要：在本教程中，您将了解 JavaScript Location 对象以及如何有效地操作位置。

Location 对象表示文档的当前位置（URL）。您可以通过引用 window 或 document 对象的 location 属性来访问 Location 对象。

window.location 和 document.location 都链接到同一个 Location 对象。

JavaScript 位置属性

假设当前 URL 为

http://localhost:8080/js/index.html?type=listing&page=2#title
Code language: JavaScript (javascript)

下图说明了 Location 对象的属性

JavaScript Location

location.href 是一个字符串，包含整个 URL。

"http://localhost:8080/js/index.html?type=listing&page=2#title"
Code language: JSON / JSON with Comments (json)

location.protocol 表示 URL 的协议方案，包括最后的冒号 (:)。

'http:'
Code language: JavaScript (javascript)

location.host 表示主机名。

"localhost:8080"
Code language: JSON / JSON with Comments (json)

location.port 表示 URL 的端口号。

"8080"
Code language: JSON / JSON with Comments (json)

location.pathname 包含一个初始 '/'，后跟 URL 的路径。

"/js/index.html"
Code language: JSON / JSON with Comments (json)

location.search 是一个字符串，表示 URL 的查询字符串。

"?type=listing&page=2"
Code language: JSON / JSON with Comments (json)

location.hash 返回一个字符串，其中包含一个 '#'，后跟 URL 的片段标识符。

"#title"
Code language: JSON / JSON with Comments (json)

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

"http://localhost:8080"
Code language: JSON / JSON with Comments (json)

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

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

Location 对象具有一系列有用的方法：assign()、reload() 和 replace()。

assign() 方法接受一个 URL，立即导航到该 URL，并在浏览器的历史记录堆栈中创建一个条目。

location.assign('https://tutorial.javascript.ac.cn');
Code language: JavaScript (javascript)

当 window.location 或 location.href 设置为 URL 时，会隐式调用 assign() 方法。

window.location = 'https://tutorial.javascript.ac.cn';
location.href = 'https://tutorial.javascript.ac.cn';
Code language: JavaScript (javascript)

如果更改 hostname、pathname 或 port 属性，页面将使用新值重新加载。请注意，更改 hash 属性不会重新加载页面，但会在浏览器的历史记录堆栈中记录新条目。

在浏览器的历史记录堆栈中创建新条目后，您可以单击浏览器的后退按钮导航到上一页。

replace() 方法类似于 assign() 方法，只是它不会在浏览器的历史记录堆栈中创建新条目。因此，您无法单击后退按钮返回上一页。

以下代码使用 replace() 方法在 3 秒后导航到 URL https://tutorial.javascript.ac.cn

setTimeout(() => {
    location.replace('https://tutorial.javascript.ac.cn');
}, 3000);
Code language: JavaScript (javascript)

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

reload();

要强制从服务器重新加载，请将 true 传递给 reload() 方法。

reload(true);    
Code language: JavaScript (javascript)

请注意，reload() 之后的代码是否执行取决于许多因素，例如网络延迟和系统资源。因此，将 reload() 放在代码的最后一行是一个好习惯。

本教程是否有帮助？