JS窗口位置对象location – JavaScript教程

上一章JavaScript教程请查看：JS屏幕对象screen

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

location位置对象

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

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

获取当前页面URL

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

下面的例子将显示完整的URL页面上的按钮点击:

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

获取URL的不同部分

类似地，你可以使用location对象的其他属性，如协议、主机名、端口、路径名、搜索等（protocol, hostname, port, pathname, search），以获得URL的不同部分。

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

//打印完整的URL
document.write(window.location.href);
  
//打印http:或https:
document.write(window.location.protocol);
 
//输出带有本地主机或本地主机:3000等端口的主机名
document.write(window.location.host);
  
//输出主机名，如localhost或www.example.com
document.write(window.location.hostname);
 
输出端口号像3000
document.write(window.location.port);
  
//打印路径名，例如/products/search.php
document.write(window.location.pathname);
 
//输出类似于?q=ipad的查询字符串
document.write(window.location.search);
 
//打印片段标识符，如#
document.write(window.location.hash);

注意：当你访问一个网站时，总是连接到一个特定的端口(例如http://localhost:3000)。但是，大多数浏览器都不会显示默认的端口号，例如，HTTP是80，HTTPS是443。

加载新文档

你可以使用location对象的assign()方法加载新文档，也就是window.location.assign()，例如:

<script>
function loadHomePage() {
    window.location.assign("http://www.srcmini02.com");
}
</script>
 
<button type="button" onclick="loadHomePage();">加载主页</button>

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

<script>
function loadHomePage(){
    window.location.replace("http://www.srcmini02.com");
}
</script>
 
<button type="button" onclick="loadHomePage();">加载主页</button>

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

<script>
function loadHomePage() {
    window.location.href = "http://www.srcmini02.com";
}
</script>
 
<button type="button" onclick="loadHomePage();">加载主页</button>

动态重新加载页面

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

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

<script>
function forceReload() {
    window.location.reload(true);
}
</script>
 
<button type="button" onclick="forceReload();">重新加载</button>

注意：调用reload()方法的结果不同于单击浏览器的reload/Refresh按钮，单击reload /Refresh按钮后，reload()方法清除在某些浏览器中可能保留的表单控制值。