From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/history/back/index.html | 59 ++++++++++++++ files/zh-cn/web/api/history/forward/index.html | 58 ++++++++++++++ files/zh-cn/web/api/history/go/index.html | 77 ++++++++++++++++++ files/zh-cn/web/api/history/index.html | 91 ++++++++++++++++++++++ files/zh-cn/web/api/history/length/index.html | 55 +++++++++++++ files/zh-cn/web/api/history/pushstate/index.html | 91 ++++++++++++++++++++++ .../zh-cn/web/api/history/replacestate/index.html | 66 ++++++++++++++++ .../web/api/history/scrollrestoration/index.html | 75 ++++++++++++++++++ files/zh-cn/web/api/history/state/index.html | 69 ++++++++++++++++ 9 files changed, 641 insertions(+) create mode 100644 files/zh-cn/web/api/history/back/index.html create mode 100644 files/zh-cn/web/api/history/forward/index.html create mode 100644 files/zh-cn/web/api/history/go/index.html create mode 100644 files/zh-cn/web/api/history/index.html create mode 100644 files/zh-cn/web/api/history/length/index.html create mode 100644 files/zh-cn/web/api/history/pushstate/index.html create mode 100644 files/zh-cn/web/api/history/replacestate/index.html create mode 100644 files/zh-cn/web/api/history/scrollrestoration/index.html create mode 100644 files/zh-cn/web/api/history/state/index.html (limited to 'files/zh-cn/web/api/history') diff --git a/files/zh-cn/web/api/history/back/index.html b/files/zh-cn/web/api/history/back/index.html new file mode 100644 index 0000000000..2bdafe4d06 --- /dev/null +++ b/files/zh-cn/web/api/history/back/index.html @@ -0,0 +1,59 @@ +--- +title: back() +slug: Web/API/History/back +tags: + - HTML5 + - History +translation_of: Web/API/History/back +--- +

{{APIRef("DOM")}}

+ +

back()方法会在会话历史记录中向后移动一页。如果没有上一页，则此方法调用不执行任何操作。

+ +

语法

+ +
window.history.back()
+ +

示例

+ +

下述简短示例使页面上的按钮导航页面至会话历史的后一项。

+ +

HTML

+ +
<button id="go-back">Go back!</button>
+ +

JavaScript

+ +
window.onload = function(e) {
+  document.getElementById('go-back').addEventListener('click', e => {
+    window.history.back();
+  })
+}
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "browsers.html#history", "History")}}{{Spec2("HTML WHATWG")}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "browsers.html#history", "History")}}{{Spec2("HTML5 W3C")}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("api.History.back")}}

diff --git a/files/zh-cn/web/api/history/forward/index.html b/files/zh-cn/web/api/history/forward/index.html new file mode 100644 index 0000000000..c2baa8227d --- /dev/null +++ b/files/zh-cn/web/api/history/forward/index.html @@ -0,0 +1,58 @@ +--- +title: forward() +slug: Web/API/History/forward +tags: + - DOM + - HTML5 + - History +translation_of: Web/API/History/forward +--- +

在会话历史中向前移动一页。它与使用delta参数为1时调用 history.go(delta)的效果相同。

+ +

语法

+ +
window.history.forward();
+ +

示例

+ +

下述例子创建了一个按钮，该按钮会在会话历史中向前移动一步。

+ +

HTML

+ +
<button id='go-forward'>Go Forward!</button>
+ +

JavaScript

+ +
window.onload = function(e) {
+  document.getElementById('go-forward').addEventListener('click', e => {
+    window.history.forward();
+  })
+}
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "browsers.html#history", "History")}}{{Spec2("HTML WHATWG")}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "browsers.html#history", "History")}}{{Spec2("HTML5 W3C")}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("api.History.forward")}}

diff --git a/files/zh-cn/web/api/history/go/index.html b/files/zh-cn/web/api/history/go/index.html new file mode 100644 index 0000000000..a6fe7b38a8 --- /dev/null +++ b/files/zh-cn/web/api/history/go/index.html @@ -0,0 +1,77 @@ +--- +title: go() +slug: Web/API/History/go +tags: + - History +translation_of: Web/API/History/go +--- +

go()方法从会话历史记录中加载特定页面。你可以使用它在历史记录中前后移动，具体取决于delta参数的值。

+ +

语法

+ +
window.history.go(delta);
+ +

参数

+ +
+
delta {{optional_inline}}
+
相对于当前页面你要去往历史页面的位置。负值表示向后移动，正值表示向前移动。因此，例如：history.go(2)向前移动两页，history.go(-2)则向后移动两页。如果未向该函数传参或delta相等于0，则该函数与调用location.reload()具有相同的效果。
+
+
+

译者注：

+ +

相等于0是采用宽松相等进行比较的。另外，JavaScript值古怪的隐式转换在这里也是可用的。

+
+
+
+ +

示例

+ +

向后移动一页（等价于调用back()）：

+ +
window.history.go(-1)
+ +

向前移动一页，就像调用了forward()：

+ +
window.history.go(1)
+ +

向前移动两页：

+ +
window.history.go(2);
+ +

向后移动两页：

+ +
window.history.go(-2);
+ +

最后，以下任意一条语句都会重新加载当前页面：

+ +
window.history.go();
+window.history.go(0);
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "browsers.html#history", "History")}}{{Spec2("HTML WHATWG")}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "browsers.html#history", "History")}}{{Spec2("HTML5 W3C")}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("api.History.go")}}

diff --git a/files/zh-cn/web/api/history/index.html b/files/zh-cn/web/api/history/index.html new file mode 100644 index 0000000000..83b6c18d0e --- /dev/null +++ b/files/zh-cn/web/api/history/index.html @@ -0,0 +1,91 @@ +--- +title: History +slug: Web/API/History +translation_of: Web/API/History +--- +
{{ APIRef("HTML DOM") }}
+ +

History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。

+ +

属性

+ +

History 接口不继承于任何属性。

+ +
+
{{domxref("History.length")}} {{readOnlyInline}}
+
返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡加载的一个页面中，这个属性返回1。
+
{{domxref("History.scrollRestoration")}} {{experimental_inline}}
+
允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的（auto）或者手动的（manual）。
+
{{domxref("History.state")}} {{readOnlyInline}} {{ gecko_minversion_inline("2.0") }}
+
返回一个表示历史堆栈顶部的状态的值。这是一种可以不必等待{{event("popstate")}} 事件而查看状态的方式。
+
+ +

方法

+ +

History接口不继承任何方法。

+ +
+
{{domxref("History.back()")}}
+
在浏览器历史记录里前往上一页, 用户可点击浏览器左上角的返回(译者注：←)按钮模拟此方法. 等价于 history.go(-1). +
Note: 当浏览器会话历史记录处于第一页时调用此方法没有效果，而且也不会报错。
+
+
{{domxref("History.forward()")}}
+
在浏览器历史记录里前往下一页，用户可点击浏览器左上角的前进(译者注：→)按钮模拟此方法. 等价于 history.go(1). +
Note: 当浏览器历史栈处于最顶端时( 当前页面处于最后一页时 )调用此方法没有效果也不报错。
+
+
{{domxref("History.go()")}}
+
通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面。比如：参数为-1的时候为上一页，参数为1的时候为下一页. 当整数参数超出界限时( 译者注:原文为When integerDelta is out of bounds )，例如: 如果当前页为第一页，前面已经没有页面了，我传参的值为-1，那么这个方法没有任何效果也不会报错。调用没有参数的 go() 方法或者不是整数的参数时也没有效果。( 这点与支持字符串作为url参数的IE有点不同)。
+
{{domxref("History.pushState()")}} {{ gecko_minversion_inline("2.0") }}
+
按指定的名称和URL（如果提供该参数）将数据push进会话历史栈，数据被DOM进行不透明处理；你可以指定任何可以被序列化的javascript对象。注意到Firefox现在忽略了这个title参数，更多的信息，请看manipulating the browser history。 +
Note: 在 Gecko 2.0 {{ geckoRelease("2.0") }} 到 Gecko 5.0 {{ geckoRelease("5.0") }}中， 被传递的对象使用JSON进行序列化. 从 Gecko 6.0 {{ geckoRelease("6.0") }}开始，使用结构化克隆算法进行序列化。这样，就可以让更多类型的对象被安全地传输。
+
+
{{domxref("History.replaceState()")}} {{ gecko_minversion_inline("2.0") }}
+
按指定的数据，名称和URL(如果提供该参数)，更新历史栈上最新的入口。这个数据被DOM 进行了不透明处理。你可以指定任何可以被序列化的javascript对象。注意到Firefox现在忽略了这个title参数，更多的信息，请看manipulating the browser history。 +
Note: 在 Gecko 2.0 {{ geckoRelease("2.0") }} 到 Gecko 5.0 {{ geckoRelease("5.0") }} 中, the passed object is serialized using JSON. Starting in Gecko 6.0 {{ geckoRelease("6.0") }}, the object is serialized using the structured clone algorithm. This allows a wider variety of objects to be safely passed.
+
+
+ +

说明

+ + + + + + + + + + + + + + + + + + + + + + + + +
说明状态评论
{{SpecName('HTML WHATWG', "browsers.html#the-history-interface", "History")}}{{Spec2('HTML WHATWG')}} +

添加scrollRestoration  属性.

+
{{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}}{{Spec2('HTML5 W3C')}}Initial definition.
{{SpecName('Custom Scroll Restoration', '#web-idl', "History")}}{{Spec2('Custom Scroll Restoration')}}添加scrollRestoration  属性.
+ +

浏览器兼容

+ + + +

{{Compat("api.History")}}

+ +
+ +

其他

+ + diff --git a/files/zh-cn/web/api/history/length/index.html b/files/zh-cn/web/api/history/length/index.html new file mode 100644 index 0000000000..bb713e6cb8 --- /dev/null +++ b/files/zh-cn/web/api/history/length/index.html @@ -0,0 +1,55 @@ +--- +title: History.length +slug: Web/API/History/length +translation_of: Web/API/History/length +--- +
{{ APIRef("HTML DOM") }}
+ +

History.length是一个只读属性，返回当前session中的history个数，包含当前页面在内。举个例子，对于新开一个tab加载的页面当前属性返回值1。

+ +

 

+ +

语法

+ +

 

+ +
length = history.length;
+
+ +

例子

+ +
var result = window.history.length; // 返回当前session中的history个数
+ +

说明

+ + + + + + + + + + + + + + + + + + + +
说明状态注释
{{SpecName('HTML WHATWG', "history.html#dom-history-length", "History.length")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#dom-history-length", "History.length")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("api.History.length")}}

+ +

参考

+ + diff --git a/files/zh-cn/web/api/history/pushstate/index.html b/files/zh-cn/web/api/history/pushstate/index.html new file mode 100644 index 0000000000..6612079f11 --- /dev/null +++ b/files/zh-cn/web/api/history/pushstate/index.html @@ -0,0 +1,91 @@ +--- +title: History.pushState() +slug: Web/API/History/pushState +tags: + - API + - History + - Location + - Web + - 会话 + - 历史 + - 参考 + - 方法 +translation_of: Web/API/History/pushState +--- +
History API
+ +

在 HTML 文档中，history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态（state）。

+ +

语法

+ +
history.pushState(state, title[, url])
+ +

参数

+ +
+
state
+
状态对象是一个JavaScript对象，它与pushState()创建的新历史记录条目相关联。 每当用户导航到新状态时，都会触发{{event("popstate")}}事件，并且该事件的状态属性包含历史记录条目的状态对象的副本。
+
状态对象可以是任何可以序列化的对象。 因为Firefox将状态对象保存到用户的磁盘上，以便用户重新启动浏览器后可以将其还原，所以我们对状态对象的序列化表示施加了640k个字符的大小限制。 如果将序列化表示形式大于此状态的状态对象传递给pushState()，则该方法将引发异常。 如果您需要更多空间，建议您使用 {{domxref("Window.sessionStorage", "sessionStorage")}}或者{{domxref("Window.localStorage", "localStorage")}}。
+
title
+
当前大多数浏览器都忽略此参数，尽管将来可能会使用它。 在此处传递空字符串应该可以防止将来对方法的更改。 或者，您可以为要移动的州传递简短的标题。
+
url {{optional_inline}}
+
新历史记录条目的URL由此参数指定。 请注意，浏览器不会在调用pushState() 之后尝试加载此URL，但可能会稍后尝试加载URL，例如在用户重新启动浏览器之后。 新的URL不必是绝对的。 如果是相对的，则相对于当前URL进行解析。 新网址必须与当前网址相同 {{glossary("origin")}}； 否则，pushState()将引发异常。 如果未指定此参数，则将其设置为文档的当前URL。
+
+ +

描述

+ +

从某种程度来说, 调用 pushState() 和 window.location = "#foo"基本上一样, 他们都会在当前的document中创建和激活一个新的历史记录。但是 pushState() 有以下优势：

+ + + +

注意： pushState() 不会造成 {{event("hashchange")}} 事件调用, 即使新的URL和之前的URL只是锚的数据不同。

+ +

示例

+ +

以下代码通过设置state, title和url创建一条新的历史记录。

+ +

JavaScript

+ +
const state = { 'page_id': 1, 'user_id': 5 }
+const title = ''
+const url = 'hello-world.html'
+
+history.pushState(state, title, url)
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', "history.html#dom-history-pushstate", "History.pushState()")}}{{Spec2('HTML WHATWG')}}没有改变{{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "history.html#dom-history-pushstate", "History.pushState()")}}{{Spec2('HTML5 W3C')}}初始化
+ +

浏览器兼容性

+ + + +

{{Compat("api.History.pushState")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/api/history/replacestate/index.html b/files/zh-cn/web/api/history/replacestate/index.html new file mode 100644 index 0000000000..e2ff2e1311 --- /dev/null +++ b/files/zh-cn/web/api/history/replacestate/index.html @@ -0,0 +1,66 @@ +--- +title: History.replaceState() +slug: Web/API/History/replaceState +translation_of: Web/API/History/replaceState +--- +

{{APIRef("DOM")}}

+ +

replaceState()方法使用state objects, title,和 URL 作为参数， 修改当前历史记录实体，如果你想更新当前的state对象或者当前历史实体的URL来响应用户的的动作的话这个方法将会非常有用。

+ +

语法

+ +
history.replaceState(stateObj, title[, url]);
+ +

参数

+ +
+
stateObj
+
状态对象是一个JavaScript对象，它与传递给 replaceState 方法的历史记录实体相关联.
+
title
+
大部分浏览器忽略这个参数, 将来可能有用. 在此处传递空字符串应该可以防止将来对方法的更改。或者，您可以为该状态传递简短标题
+
url {{optional_inline}}
+
历史记录实体的URL. 新的URL跟当前的URL必须是同源; 否则 replaceState 抛出一个异常.
+
+ +

例子

+ +

假设 http://mozilla.org/foo.html 执行下面的 JavaScript 代码:

+ +
var stateObj = { foo: "bar" };
+history.pushState(stateObj, "", "bar.html");
+ +

上面这两行的解释可以在 "Example of pushState() method"这个章节找到。然后假设 http://mozilla.org/bar.html  执行下面的 JavaScript 代码:

+ +
history.replaceState(stateObj, "", "bar2.html");
+ +

这会让URL栏显示 http://mozilla.org/bar2.html, 但是不会刷新 bar2.html  页面 甚至不会检查bar2.html 是否存在

+ +

假设用户跳转到 http://www.microsoft.com, 然后点击返回按钮.这时, URL 栏将会显示 http://mozilla.org/bar2.html 页面. 如果用户此时点击返回按钮, URL栏将会显示 http://mozilla.org/foo.html 页面, 最终绕过了 bar.html 页面.

+ +

说明

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "browsers.html#history", "History")}}{{Spec2("HTML WHATWG")}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "browsers.html#history", "History")}}{{Spec2("HTML5 W3C")}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("api.History.replaceState")}}

diff --git a/files/zh-cn/web/api/history/scrollrestoration/index.html b/files/zh-cn/web/api/history/scrollrestoration/index.html new file mode 100644 index 0000000000..9ae0fa7d9b --- /dev/null +++ b/files/zh-cn/web/api/history/scrollrestoration/index.html @@ -0,0 +1,75 @@ +--- +title: History.scrollRestoration +slug: Web/API/History/scrollRestoration +tags: + - API + - HTML DOM + - History + - History API + - Property + - Reference +translation_of: Web/API/History/scrollRestoration +--- +
{{APIRef("History API")}}
+ +
+ +

{DOMxRef("History"))的接口——滚动恢复属性允许web应用程序在历史导航上显式地设置默认滚动恢复行为

+ +

语法

+ +
const scrollRestore = history.scrollRestoration
+ +

值

+ +
+
auto
+
将恢复用户已滚动到的页面上的位置。
+
manual
+
未还原页上的位置。用户必须手动滚动到该位置。
+
+ +

案例

+ +

查看当前页面滚动恢复行为

+ +
const scrollRestoration = history.scrollRestoration
+if (scrollRestoration === 'manual') {
+  console.log('The location on the page is not restored, user will need to scroll manually.');
+}
+
+ +

防止自动恢复页面位置

+ +
if (history.scrollRestoration) {
+  history.scrollRestoration = 'manual';
+}
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态评论
{{SpecName("HTML WHATWG", "#scroll-restoration-mode", "scroll restoration mode")}}{{Spec2("HTML WHATWG")}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "browsers.html#dom-history-scrollrestoration", "History.scrollRestoration")}}{{Spec2("HTML5 W3C")}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("api.History.scrollRestoration")}}

diff --git a/files/zh-cn/web/api/history/state/index.html b/files/zh-cn/web/api/history/state/index.html new file mode 100644 index 0000000000..7b59ecb5eb --- /dev/null +++ b/files/zh-cn/web/api/history/state/index.html @@ -0,0 +1,69 @@ +--- +title: state +slug: Web/API/History/state +translation_of: Web/API/History/state +--- +

返回在 history 栈顶的 任意 值的拷贝。 通过这种方式可以查看 state 值，不必等待 popstate事件发生后再查看。

+ +

语法

+ +
let currentState = history.state;
+ +

如果不进行下面两种类型的调用，state 的值将会是 null 

+ +

{{domxref("History.pushState","pushState()")}} or {{domxref("History.replaceState","replaceState()")}}.

+ +

例子

+ +

下面 log 例句输出 history.state 的值，首先是在没有执行 {{domxref("History.pushState","pushState()")}} 语句进而将值 push 到 history 之前的 log。下面一行 log 语句再次输出 state 值，此时 history.state 已经有值。可以在脚本文件中执行下面语句，或者在控制台直接执行。

+ +
// 值为 null 因为我们还没有修改 history 栈
+console.log(`History.state before pushState: ${history.state}`);
+
+// 现在 push 一些数据到栈里
+history.replaceState({name: 'Example'}, "pushState example", 'page3.html');
+
+// 现在 state 已经有值了
+console.log(`History.state after pushState: ${history.state}`);
+ +

SpecificationsE

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
HTML Living Standard
+ The definition of 'History' in that specification.		Living StandardAdds the scrollRestoration attribute.
HTML5
+ The definition of 'History' in that specification.		RecommendationInitial definition.
Custom Scroll Restoration - History-based API
+ The definition of 'History' in that specification.		DraftAdds the scrollRestoration attribute.
+ +

Browser compatibility

+ + + +

{{Compat("api.History.state")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf