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/hashchangeevent/index.html | 135 +++++++++++++++++++++ .../web/api/hashchangeevent/newurl/index.html | 47 +++++++ .../web/api/hashchangeevent/oldurl/index.html | 41 +++++++ 3 files changed, 223 insertions(+) create mode 100644 files/zh-cn/web/api/hashchangeevent/index.html create mode 100644 files/zh-cn/web/api/hashchangeevent/newurl/index.html create mode 100644 files/zh-cn/web/api/hashchangeevent/oldurl/index.html (limited to 'files/zh-cn/web/api/hashchangeevent') diff --git a/files/zh-cn/web/api/hashchangeevent/index.html b/files/zh-cn/web/api/hashchangeevent/index.html new file mode 100644 index 0000000000..bb45095bac --- /dev/null +++ b/files/zh-cn/web/api/hashchangeevent/index.html @@ -0,0 +1,135 @@ +--- +title: HashChangeEvent +slug: Web/API/HashChangeEvent +tags: + - API + - Event + - HTML5 + - HashChange + - 事件 + - 参考 + - 接口 +translation_of: Web/API/HashChangeEvent +--- +
{{APIRef("HTML DOM")}}
+ +

HashChangeEvent 接口表示一个变化事件，当 URL 中的片段标识符发生改变时，会触发此事件。

+ +

片段标识符指 URL 中 # 号和它以后的部分。

+ +

{{InheritanceDiagram}}

+ +

属性

+ +

 这个接口也从 {{domxref("Event")}} 中继承属性。

+ +
+
{{domxref("HashChangeEvent.newURL")}} {{readonlyInline}} {{gecko_minversion_inline("6.0")}}
+
window即将导航到达的新 URL。
+
{{domxref("HashChangeEvent.oldURL")}} {{readonlyInline}} {{gecko_minversion_inline("6.0")}}
+
window此前导航到达过的URL。
+
+ +

方法

+ +

这个接口没有自己的方法，但从 {{domxref("Event")}} 中继承方法

+ +

示例

+ +

井号内容变化的语法选择

+ +

你可以选择使用下述的任一方法监听 {{event("hashchange")}} 事件。

+ +
window.onhashchange = funcRef;
+
+ +

或

+ +
<body onhashchange="funcRef();">
+
+ +

或

+ +
window.addEventListener("hashchange", funcRef, false);
+
+ +

基本示例

+ +
function locationHashChanged() {
+  if (location.hash === '#somecoolfeature') {
+    somecoolfeature();
+  }
+}
+
+window.addEventListener('hashchange', locationHashChanged);
+
+ +
+
+ +

回落方法（Polyfill）

+ +

在 Modernizr GitHub page 中列出了几种回落（fallback）脚本。基本上，这些脚本每隔一段时间检查以此 {{domxref("HTMLHyperlinkElementUtils.hash", "location.hash")}}。这里是其中一个版本，其仅允许一个处理程序（handler）绑定在 {{domxref("WindowEventHandlers.onhashchange", "onhashchange")}} 属性上：

+ +
(function(window) {
+
+  // 如果浏览器已经实现了此事件，则退出函数
+  if ( "onhashchange" in window.document.body ) return;
+
+  var location = window.location,
+      oldURL  = location.href,
+      oldHash = location.hash;
+
+  // 每隔 100 毫秒，检查一次片段标识符
+  setInterval(function() {
+    var newURL  = location.href,
+        newHash = location.hash;
+
+    // 如果片段标识符有变化，且处理程序存在
+    if ( newHash != oldHash && typeof window.onhashchange === "function" ) {
+      // 执行处理程序
+      window.onhashchange({
+        type: "hashchange",
+        oldURL: oldURL,
+        newURL: newURL
+      });
+
+      oldURL = newURL;
+      oldHash = newHash;
+    }
+  }, 100);
+
+})(window);
+
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("HTML WHATWG", "#hashchangeevent", "HashChangeEvent")}}{{Spec2("HTML WHATWG")}}Initial definition
+ +

浏览器兼容性

+ + + +

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

+ +

相关事件

+ + diff --git a/files/zh-cn/web/api/hashchangeevent/newurl/index.html b/files/zh-cn/web/api/hashchangeevent/newurl/index.html new file mode 100644 index 0000000000..104fa38bfa --- /dev/null +++ b/files/zh-cn/web/api/hashchangeevent/newurl/index.html @@ -0,0 +1,47 @@ +--- +title: HashChangeEvent.newURL +slug: Web/API/HashChangeEvent/newURL +tags: + - API + - HashChangeEvent + - Property + - Reference + - Web API +translation_of: Web/API/HashChangeEvent/newURL +--- +
{{APIRef("HTML DOM")}}
+ +
+ +

newURL 为 {{domxref("HashChangeEvent")}} 接口的只读属性，其值为窗口导航改变后的 URL。

+ +

语法

+ +
let newEventUrl = event.newURL;
+ +

返回值

+ +

{{domxref("DOMString")}}.

+ +

示例

+ +
window.addEventListener('hashchange', function(event) {
+  console.log('Hash changed to ' + event.newURL);
+});
+ +

规范

+ + + + + + + + + + + + + + +
规范状态注释
{{SpecName('HTML WHATWG', '#dom-hashchangeevent-newurl', 'HashChangeEvent: newURL')}}{{Spec2('HTML WHATWG')}}
diff --git a/files/zh-cn/web/api/hashchangeevent/oldurl/index.html b/files/zh-cn/web/api/hashchangeevent/oldurl/index.html new file mode 100644 index 0000000000..f93dd11624 --- /dev/null +++ b/files/zh-cn/web/api/hashchangeevent/oldurl/index.html @@ -0,0 +1,41 @@ +--- +title: HashChangeEvent.oldURL +slug: Web/API/HashChangeEvent/oldURL +translation_of: Web/API/HashChangeEvent/oldURL +--- +
{{APIRef("HTML DOM")}}
+ +
+ +

oldURL 为 {{domxref("HashChangeEvent")}} 接口的只读属性，其值为窗口导航改变前的 URL。

+ +

语法

+ +
let oldEventUrl = event.oldURL;
+ +

返回值

+ +

{{domxref("DOMString")}}.

+ +

示例

+ +
window.addEventListener('hashchange', function(event) {
+  console.log('Hash changed from ' + event.oldURL);
+});
+ +

规范

+ + + + + + + + + + + + + + +
规范状态注释
{{SpecName('HTML WHATWG', '#dom-hashchangeevent-oldurl', 'HashChangeEvent: oldURL')}}{{Spec2('HTML WHATWG')}}
-- cgit v1.2.3-54-g00ecf