Javascript 简明教程
JavaScript - Location Object
Window Location Object
JavaScript 中的 location 对象提供有关浏览器位置（即 URL）的信息。它是 window 和 document 对象的内置属性。我们可以使用 window.location 或 document.location 访问它。
“location”对象包含多个属性和方法，用于获取和修改浏览器位置（URL）的信息。
JavaScript Location Object Properties
我们可以使用 location 对象的属性来获取 URL 的信息：
-
hash − 此属性用于设置或获取 URL 的锚部分。
-
host − 此属性用于设置或获取 URL 的主机名或端口号。
-
hostname − 此属性用于设置主机名。
-
href − 此属性用于设置或获取当前窗口的 URL。
-
origin − 此属性返回 URL 的协议、域名和端口。
-
pathname − 此属性更新或获取路径名称。
-
port − 此属性更新或获取 URL 的端口。
-
protocol − 此属性更新或获取协议。
-
search − 此属性用于设置或获取 URL 的查询字符串。
Syntax
按照以下语法访问 location 对象的属性和方法 -
window.location.property;或
location.property;您可以使用 “window” 对象来访问 “location” 对象。
此处，我们通过示例演示了 location 对象的部分属性的用法。
Example: Accessing location host property
location.host 属性从当前 URL 中返回主机名。但是，您也可以使用它更改主机名。
在以下代码中，我们从 URL 中提取主机名。您会看到它返回 “www.tutorialspoint.com”。
<html>
<body>
<div id="output"></div>
<script>
const host = location.host;
document.getElementById("output").innerHTML =
"The host of the current location is: " + host;
</script>
</body>
</html>The host of the current location is: www.tutorialspoint.comExample: Accessing location protocol property
location.protocol 属性用于获取当前 URL 中使用。也可以使用它来更新协议。
试用以下示例使用 location.protocol 属性 -
<html>
<body>
<div id = "output"> </div>
<script>
document.getElementById("output").innerHTML =
"The protocol of the current location is: " + location.protocol;
</script>
</body>
</html>The protocol of the current location is: https:Example: Accessing location hostname property
location.hostname 属性返回当前 URL 的主机名。也可以使用它来主机名。
试用以下示例使用 location.hostname 属性 –
<html>
<body>
<div id = "output"> </div>
<script>
document.getElementById("output").innerHTML =
"The host name of the current location is: " + location.hostname;
</script>
</body>
</html>The host name of the current location is: www.tutorialspoint.comExample: Accessing location pathname property
location.pathname 属性返回当前位置的路径名。可以使用它来设置路径名。
<html>
<body>
<div id = "output"> </div>
<script>
document.getElementById("output").innerHTML =
"The protocol of the current location is: " + location.pathname;
</script>
</body>
</html>The protocol of the current location is: /javascript/javascript_location_object.htmJavaScript Location Object Methods
还可以使用 location 对象的 methods 导航到新 URL −
-
assign(url) - 该方法在指定 URL 加载新的文档。
-
replace(url) - 该方法使用指定 URL 中的新文档替换当前文档。
-
reload() - 该方法重新加载当前文档。
JavaScript location assign() method
location.assign() 方法，将 URL 在当前窗口中进行更改。简言之，它将打开新网页。
遵循以下语法在 JavaScript 中使用 location.assign() 方法 −
location.assign();在下面的代码中，当您单击“Go to home page”按钮时，它会将您重定向到 tutorialpoint 网站的主页。
<html>
<body>
<div id="output"></div>
<button onclick="changePage()">Go to Home Page</button>
<script>
let output = document.getElementById("output");
function changePage() {
window.location.assign("https://www.tutorialspoint.com/");
}
</script>
</body>
</html>