forked from devote/HTML5-History-API
-
Notifications
You must be signed in to change notification settings - Fork 1
/
readme.en.txt
164 lines (113 loc) · 6.04 KB
/
readme.en.txt
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
Library emulates the HTML5 History API in older browsers.
Library that does not add unnecessary methods forcing them to study, and operates under the specification of w3c, the interface History.
For example I can give a short code to work with her.
In principle we are working with HTML5 History API as described for example here http://diveintohtml5.info/history.html or on the specification http://www.w3.org/TR/html5/history.html#the-history-interface
That is a very brief example:
on pure JS:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="history.js"></script>
<script type="text/javascript">
window.onload = function() {
// function for the reference is processed when you click on the link
function handlerAnchors() {
// keep the link in the browser history
history.pushState( null, null, this.href );
// here can cause data loading, etc.
// do not give a default action
return false;
}
// looking for all the links
var anchors = document.getElementsByTagName( 'a' );
// hang on the event, all references in this document
for( var i = 0; i < anchors.length; i++ ) {
anchors[ i ].onclick = handlerAnchors;
}
// hang on popstate event triggered by pressing back/forward in browser
window.onpopstate = function( e ) {
// we get a normal Location object
/*
* Note, this is the only difference when using this library,
* because the object document.location don't overwritten,
* so library the returns generated "location" object within
* an object window.history, so get it out of "history.location".
* For browsers supporting "history.pushState" get shaped
* object "location" with the usual "document.location".
*/
var returnLocation = history.location || document.location;
// here can cause data loading, etc.
// just post
alert( "We returned to the page with a link: " + returnLocation.href );
}
}
</script>
</head>
<body>
<a href="/mylink.html">My Link</a>
<a href="/otherlink.html">Other Link</a>
</body>
</html>
And now show an example in conjunction with jQuery:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="history.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
// looking for all the links and hang on the event, all references in this document
$("a").click(function() {
// keep the link in the browser history
history.pushState( null, null, this.href );
// here can cause data loading, etc.
// do not give a default action
return false;
});
// hang on popstate event triggered by pressing back/forward in browser
$( window ).bind( "popstate", function( e ) {
// we get a normal Location object
/*
* Note, this is the only difference when using this library,
* because the object document.location don't overwritten,
* so library the returns generated "location" object within
* an object window.history, so get it out of "history.location".
* For browsers supporting "history.pushState" get shaped
* object "location" with the usual "document.location".
*/
var returnLocation = history.location || document.location;
// here can cause data loading, etc.
// just post
alert( "We returned to the page with a link: " + returnLocation.href );
});
});
</script>
</head>
<body>
<a href="/mylink.html">My Link</a>
<a href="/otherlink.html">Other Link</a>
</body>
</html>
Using the event popstate the usual pure JS:
window[ window.addEventListener ? 'addEventListener' : 'attachEvent' ]( 'popstate', function( event ) {
// receiving location from the window.history object
var loc = history.location || document.location;
alert( "return to: " + loc );
}, false);
Using the popstate event in conjunction jQuery:
$( window ).bind( 'popstate', function( event ) {
// receiving location from the window.history object
var loc = history.location || document.location;
alert( "return to: " + loc );
});
You can use the advanced configuration library:
history.min.js?basepath=/pathtosite/ - the base path to the site defaults to the root "/".
history.min.js?redirect=true - enable link translation.
history.min.js?type=/ - substitute the string after the anchor, by default, nothing substitutes.
You can also combine options:
history.min.js?type=/&redirect=true&basepath=/pathtosite/ - the order of options does not matter.
Or execute special method in JavaScript:
history.redirect( /* type = */ '/', /* basepath = */ '/pathtosite/' );
Demo Site: http://history.spb-piksel.ru/
GitHub Project: https://github.com/devote/HTML5-History-API
I'm on Twitter: https://twitter.com/DimaPakhtinov