1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
---
title: History
slug: Web/API/History
tags:
- API
- HTML DOM
- History API
- Interface
- NeedsTranslation
- TopicStub
- Web
translation_of: Web/API/History
---
<div>{{ APIRef("History API") }}</div>
<p>The <strong><code>History</code></strong> interface allows manipulation of the browser <em>session history</em>, that is the pages visited in the tab or frame that the current page is loaded in.</p>
<h2 id="Properties">Properties</h2>
<p><em>The <code>History</code></em><em> interface doesn't inherit any property.</em></p>
<dl>
<dt>{{domxref("History.length","length")}} {{readOnlyInline}}</dt>
<dd>Returns an <code>Integer</code> representing the number of elements in the session history, including the currently loaded page. For example, for a page loaded in a new tab this property returns <code>1</code>.</dd>
<dt>{{domxref("History.scrollRestoration","scrollRestoration")}}</dt>
<dd>Allows web applications to explicitly set default scroll restoration behavior on history navigation. This property can be either <code>auto</code> or <code>manual</code>.</dd>
<dt>{{domxref("History.state","state")}} {{readOnlyInline}}</dt>
<dd>Returns an <code>any</code> value representing the state at the top of the history stack. This is a way to look at the state without having to wait for a {{event("popstate")}} event.</dd>
</dl>
<h2 id="Methods">Methods</h2>
<p><em>The <code>History</code></em> <em>interface doesn't inherit any methods.</em></p>
<dl>
<dt>{{domxref("History.back","back()")}}</dt>
<dd>This asynchronous method goes to the previous page in session history, the same action as when the user clicks the browser's <kbd>Back</kbd> button. Equivalent to <code>history.go(-1)</code>.
<div class="note">Calling this method to go back beyond the first page in the session history has no effect and doesn't raise an exception.</div>
</dd>
<dt>{{domxref("History.forward","forward()")}}</dt>
<dd>This asynchronous method goes to the next page in session history, the same action as when the user clicks the browser's <kbd>Forward</kbd> button; this is equivalent to <code>history.go(1)</code>.
<div class="note">Calling this method to go forward beyond the most recent page in the session history has no effect and doesn't raise an exception.</div>
</dd>
<dt>{{domxref("History.go","go()")}}</dt>
<dd>Asynchronously loads a page from the session history, identified by its relative location to the current page, for example <code>-1</code> for the previous page or <code>1</code> for the next page. If you specify an out-of-bounds value (for instance, specifying <code>-1</code> when there are no previously-visited pages in the session history), this method silently has no effect. Calling <code>go()</code> without parameters or a value of <code>0</code> reloads the current page. Internet Explorer lets you specify a string, instead of an integer, to go to a specific URL in the history list.</dd>
<dt>{{domxref("History.pushState","pushState()")}}</dt>
<dd>Pushes the given data onto the session history stack with the specified title (and, if provided, URL). The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized. Note that all browsers but Safari currently ignore the <em>title</em> parameter. For more information, see <a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a>.</dd>
<dt>{{domxref("History.replaceState","replaceState()")}}</dt>
<dd>Updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL. The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized. Note that all browsers but Safari currently ignore the <em>title</em> parameter. For more information, see <a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a>.</dd>
</dl>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', "browsers.html#the-history-interface", "History")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Adds the <code>scrollRestoration</code> attribute.</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.History")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>The {{domxref("Window.history")}} property returning the history of the current session.</li>
</ul>
|
