JavaScript 窗口位置

Created: October-14, 2018

在本教程中，你将了解 JavaScript 窗口位置对象。

位置对象

窗口的位置属性（即 window.location）是对位置 Location 对象的引用; 它表示该窗口中显示的文档的当前 URL。

由于 window 对象位于作用域链的顶部，因此 window.location 可以在没有 window. 前缀的情况下访问对象的属性，例如 window.location.href 可以写为 location.href 。以下部分将向你展示如何使用 window 对象的 location object 属性获取页面的 URL 以及主机名，协议等。

获取当前页面 URL

你可以使用 window.location.href 属性获取当前页面的完整 URL。

以下示例将显示按钮单击时页面的完整 URL：

<script>
function getURL() {
    alert("The URL of this page is: " + window.location.href);
}
</script>
 
<button type="button" onclick="getURL();">Get Page URL</button>

获取 URL 的不同部分

类似地，可以使用位置对象的其他属性，例如 protocol ， hostname ， port ， pathname ， search 等等，以获得 URL 的不同部分。

请尝试以下示例，以了解如何使用窗口的 location 属性。

// Prints complete URL
document.write(window.location.href);
  
// Prints protocol like http: or https:
document.write(window.location.protocol); 
 
// Prints hostname with port like localhost or localhost:3000
document.write(window.location.host);
  
// Prints hostname like localhost or www.example.com
document.write(window.location.hostname);
 
// Prints port number like 3000
document.write(window.location.port);
  
// Prints pathname like /products/search.php
document.write(window.location.pathname); 
 
// Prints query string like ?q=ipad
document.write(window.location.search);
 
// Prints fragment identifier like #featured
document.write(window.location.hash);

注意： 当你访问网站时，你始终连接到特定端口（例如 http://localhost:3000）。但是，大多数浏览器根本不会显示默认端口号，例如，HTTP 为 80，HTTPS 为 443。

加载新文件

你可以使用 location 对象的 assign() 方法，比如 window.location.assign() 来加载作为参数提供的 URL 的另一个资源，例如：

<script>
function loadHomePage() {
    window.location.assign("http://www.tastones.com");
}
</script>
 
<button type="button" onclick="loadHomePage();">Load Home Page</button>

你也可以使用 replace() 方法加载几乎与 assign() 相同的新文档。不同之处在于它不会在浏览器的历史记录中创建条目，这意味着用户将无法使用后退按钮导航到该条目。这是一个例子：

<script>
function loadHomePage(){
    window.location.replace("http://www.tastones.com");
}
</script>
 
<button type="button" onclick="loadHomePage();">Load Home Page</button>

或者，你可以使用 window.location.href 属性在窗口中加载新文档。它产生与使用 assign() 方法相同的效果。这是一个例子：

<script>
function loadHomePage() {
    window.location.href = "http://www.tastones.com";
}
</script>
 
<button type="button" onclick="loadHomePage();">Load Home Page</button>

动态重新加载页面

reload() 方法可用于动态重新加载当前页面。

你可以选择指定布尔参数 true 或 false 。如果参数为 true ，则该方法将强制浏览器从服务器重新加载页面。如果指定 false 或未指定，则浏览器可以从其缓存重新加载页面。这是一个例子：

<script>
function forceReload() {
    window.location.reload(true);
}
</script>
 
<button type="button" onclick="forceReload();">Reload Page</button>

注意： 调用 reload() 方法的结果与单击浏览器的“重新加载/刷新”按钮不同。reload() 方法清除表单控件值，而在某些浏览器中单击“重新加载/刷新”按钮后可能会保留该值。