JavaScript中window.location与history对象的使用指南

window.location 对象详解

Window Location

• window.location 对象用于获取当前页面的地址（URL），并可引导浏览器跳转到新页面。
• 在编写代码时，可以省略 window 前缀直接使用 location。以下是一些常见用法示例：
• 具体实例如下：
• location.hostname 属性用于返回 Web 主机名（域名）。
• location.pathname 属性返回当前页面的路径及文件名。
• location.port 属性返回 Web 主机使用的端口号（通常为 80 或 443）。
• location.protocol 属性返回所使用的 Web 协议（如 http:// 或 https://）。

Window Location Href

location.href 属性用于返回当前页面的完整 URL。 示例： 返回当前页面的整个 URL：

<script>

document.write(location.href);

</script>

Window Location Pathname location.pathname 属性用于返回 URL 的路径部分。 示例： 返回当前 URL 的路径名：

<script>

document.write(location.pathname);

</script>

上述代码的输出结果为：

/js/js-window-location.html

Window Location Assign location.assign() 方法用于加载并显示新文档。 示例： 加载一个新文档：

<html>
<head>
<script>
function newDoc()
 {
 window.location.assign("http://www.w3cschool.cc")
 }
</script>
</head>
<body>

<input type="button" value="Load new document" onclick="newDoc()">

</body>
</html>

window.history 对象与导航控制

Window History window.history 对象在编写时同样可以省略 window 前缀。 出于保护用户隐私的考虑，JavaScript 对该对象的访问权限进行了限制。 常用方法包括：

• history.back() - 功能等同于点击浏览器中的后退按钮。
• history.forward() - 功能等同于点击浏览器中的前进按钮。

Window History Back

history.back() 方法用于加载历史列表中的前一个 URL。 其效果与在浏览器中点击后退按钮一致： 示例： 在页面上创建一个后退按钮：

<html>
<head>
<script>
function goBack()
 {
 window.history.back()
 }
</script>
</head>
<body>

<input type="button" value="Back" onclick="goBack()">

</body>
</html>

Window History Forward history.forward() 方法用于加载历史列表中的下一个 URL。 其效果与在浏览器中点击前进按钮一致： 示例： 在页面上创建一个向前按钮：

<html>
<head>
<script>
function goForward()
 {
 window.history.forward()
 }
</script>
</head>
<body>

<input type="button" value="Forward" onclick="goForward()">

</body>
</html>