-
Notifications
You must be signed in to change notification settings - Fork 1
/
History.html
108 lines (101 loc) · 4.34 KB
/
History.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
<!DOCTYPE html>
<html>
<head>
<meta name="pageid" content="history.html">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<script type="text/javascript" src="../src/js/eDebugger.js"></script>
<script type="text/javascript" src="../src_v2.0.0/js/Evoque.js"></script>
<script type="text/javascript" src="../src_v2.0.0/js/Evoque.Session.js"></script>
<script type="text/javascript" src="../src_v2.0.0/js/Evoque.Dialog.js"></script>
<link rel="stylesheet" type="text/css" href="../src_v2.0.0/style/Evoque.Dialog.css" />
<script type="text/javascript">
var i = 1;
$(function () {
// $('#divHis').html($.history.show());
//
// $.history.backHandleByBrowser = function () {
// $.dialog.alert('Clicked back button!');
// };
// ++i;
// var url = 'http://10.2.10.129:4001/' + i + '/';
//history.replaceState({ url: url }, i, url);
window.addEventListener('popstate', function (e) {
// ++i;
// var url = 'http://10.2.10.129:4001/' + i + '/';
// history.replaceState({ url: url }, i, url);
// ++i;
// var url = 'http://10.2.10.129:4001/' + i + '/';
// history.pushState({ url: url }, i, url);
//alert('pop');
var obj = history.state;
//$('#test').html('e.state:' + JSON.stringify(e.state) + '; history.state:' + JSON.stringify(obj) + '; history.length:' + history.length);
});
//$('#test').html(history.pushState);
});
function btnClick()
{
try
{
$('#test1').html('***history.length:' + history.length);
++i;
//var url = 'http://10.2.10.129:4001/' + i + '/';
var href = location.href;
if (href.indexOf('?') > -1)
{
href = href.substr(0, href.indexOf('?') + 1) + 't=' + i;
}
else
{
href += '?t=' + i;
}
var url = href;
history.pushState({ obj: {url: url}, x: '1', y: [ 0, 1, 2] }, i, url);
var obj = history.state;
$('#test').html('history.state:' + JSON.stringify(obj) + '; history.length:' + history.length);
}
catch (ex)
{
alert(ex);
}
}
function btnReplaceClick()
{
try
{
$('#test1').html('***history.length:' + history.length);
++i;
var url = 'http://10.2.10.129:4001/' + i + '/';
history.replaceState({url: url}, i, url);
var obj = history.state;
$('#test').html('history.state:' + JSON.stringify(obj) + '; history.length:' + history.length);
}
catch (ex)
{
alert(ex);
}
}
/**
* 在pushState和popState的过程中,history.length数值不准,
* 经测试，在Chrome浏览器、FireFox、IE10下都是：只有在调用pushState方法时候才会刷新history.length数值,在popstate事件回调的时候不会刷新history.length数值
*
* 为什么这么设计？想明白了：在pop的时候不改变history的长度，是为了与后退按钮相对的前进按钮能够正常向历史栈的前方记录移动指针而故意设计的。
* 只有在重新pushState的时候，浏览器认为是要更改历史栈的数据了，所以才变更历史栈的长度
*
* replaceState也不会更改历史栈的长度和数据
*
* 后退和前进按钮都会触发popstate事件
*/
</script>
</head>
<body>
<a href="javascript:btnClick();">pushState</a>
<a href="javascript:history.go(-1);">back</a>
<a href="javascript:btnReplaceClick();">replaceState</a>
<a href="history/1.html">1.html</a>
<div id="divHis"></div>
<div id="test1"></div>
<div id="test"></div>
</body>
</html>