-
Notifications
You must be signed in to change notification settings - Fork 6
/
html5-history-api.html
139 lines (139 loc) · 4.19 KB
/
html5-history-api.html
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5 history api</title>
</head>
<body>
<div>
<h1>
html5 history api
</h1>
</div>
<section>
<pre>
window.history.replaceState(argument1, argument2);
window.history.pushState(argument1, argument2);
</pre>
</section>
<section>
<h2>Window.location</h2>
<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/location" target="_blank">https://developer.mozilla.org/zh-CN/docs/Web/API/Window/location</a>
<article>
<h3>Window.location 只读属性，返回一个 {{domxref("Location")}} 对象，提供有关文档当前地址的信息。</h3>
<p>
尽管 Window.location 是一个只读 Location 对象，你仍然可以赋给它一个 {{domxref("DOMString")}}。
这意味着您可以在大多数情况下处理 location，就像它是一个字符串一样：
window.location = 'http://www.example.com'，是 window.location.href = 'http://www.example.com' 的同义词 。
</p>
</article>
</section>
<!-- js -->
<script>
"1" == 1;
// true
"1" === 1;
// false
"1" === "1";
// true
</script>
<script>
"string".localeCompare("");
// 1
"string".localeCompare("string");
// 0
"string".localeCompare("0");
// 1
"string".localeCompare("xyz");
// -1
"string".localeCompare("1");
// 1
</script>
<script>
if (!!(window.history && history.pushState)){
console.log(`支持 History API`, history.pushState(null, `history.pushState: title`, `https://javascript.xgqfrms.xyz/html5-history-api.html#pushState` ));
/*
state：
一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。
如果不需要这个对象，此处可以填null。
title：
新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：
新的网址，必须与当前页面处在同一个域。
浏览器的地址栏将显示这个网址。
*/
} else {
console.log(`%c 不支持 History API`, `color: red; font-size: 32px;`);
}
!!false
// false
!!(false);
// false
!!0
// false
!!1
// true
!0
// true
!1
// false
0 == false
// true
0 === false
// false
1 == true
// true
1 === true
// false
"0" == false
// true
"0" === false
// false
"1" == true
// true
"1" === true
// false
</script>
<script>
const somecoolfeature = () =>{
console.log(`somecoolfeature()`, this);
}
if ("onhashchange" in window) {
alert("该浏览器支持hashchange事件!");
}
function locationHashChanged() {
if (location.hash === "#somecoolfeature") {
somecoolfeature();
}
}
window.onhashchange = locationHashChanged;
</script>
<script>
window.history
History {
length: 14,
scrollRestoration: "auto",
state: 0
}
length: 14
scrollRestoration: "auto"
state: 0
__proto__: History
back: function back()
forward: function forward()
go: function go()
length: (...)
pushState: function pushState()
replaceState: function replaceState()
scrollRestoration: (...)
state: (...)
constructor: function History()
Symbol(Symbol.toStringTag): "History"
get length: function ()
get scrollRestoration: function ()
set scrollRestoration: function ()
get state: function ()
__proto__: Object
</script>
</body>
</html>