Javascript 简明教程
JavaScript - History Object
Window History Object
在JavaScript中,窗口“history”对象包含有关浏览器会话记录的信息。它包含当前会话中访问过的URL的数组。
“history”对象是“window”对象的一个属性。可以访问history属性,无需引用它的所有者对象,即window对象。
使用“history”对象的method,可以转到浏览器的会话的先前、后继或特定URL。
History Object Methods
窗口history对象提供了有用的method,允许我们来回浏览历史记录列表。
按照以下语法在JavaScript中使用“history”对象。
window.history.methodName();
OR
history.methodName();
您可以使用“window”对象访问“history”对象。
JavaScript History back() Method
history对象的JavaScript back()方法加载历史记录列表中的先前URL。
Example
在下面的代码输出中,您可以单击“后退”按钮转到上一个URL。它的工作原理与浏览器的后退按钮相同。
<html>
<body>
<p> Click "Go Back" button to load previous URL </p>
<button onclick="goback()"> Go Back </button>
<p id = "output"> </p>
<script>
function goback() {
history.back();
document.getElementById("output").innerHTML +=
"You will have gone to previous URL if it exists";
}
</script>
</body>
</html>
JavaScript History forward() Method
history对象的forward()方法将您带到下一个URL。
Example
在下面的代码中,单击按钮转到下一个URL。它的工作原理与浏览器的前进按钮相同。
<html>
<body>
<p> Click "Go Forward" button to load next URL</p>
<button onclick = "goforward()"> Go Forward </button>
<p id = "output"> </p>
<script>
function goforward() {
history.forward();
document.getElementById("output").innerHTML =
"You will have forwarded to next URL if it exists."
}
</script>
</body>
</html>
JavaScript History go() Method
history对象的go()方法将您带到浏览器的会话的特定URL。
Example
在下面的代码中,我们使用go()方法从当前网页移动到上两个网页。
<html>
<body>
<p> Click the below button to load 2nd previous URL</p>
<button onclick = "moveTo()"> Move at 2nd previous URL </button>
<p id = "output"> </p>
<script>
function moveTo() {
history.go(-2);
document.getElementById("output").innerHTML =
"You will have forwarded to 2nd previous URL if it exists.";
}
</script>
</body>
</html>
Example
在下面的代码中,我们使用go()方法从当前网页移动到上两个网页。
<html>
<body>
<p> Click the below button to load 2nd next URL</p>
<button onclick = "moveTo()"> Move at 2nd next URL </button>
<p id = "output"> </p>
<script>
function moveTo() {
history.go(2);
document.getElementById("output").innerHTML =
"You will have forwarded to 2nd next URL if it exists.";
}
</script>
</body>
</html>
以下是完整的窗口历史对象参考,包括属性和方法