HTML and CSS Reference
In-Depth Information
The new URL you pass to
pushState()
or
replaceState()
must have the
same origin (domain, etc.) as the current page, or the API throws an
error. You can change the path, filename, query string, and hash por-
tions of the URL, just not the protocol/schema, domain, or port.
It would make no sense, and indeed would be a security risk, to allow
mixing of URL origins in the state queue. Use normal location/history
manipulation if you need to navigate across different origins.
Let's take a look at an example of how these two additional functionalities work to-
gether to allow you to handle forward/backward navigation with only state changes
(and not separate page loads), as well as keeping the displayed URL in the address bar
up-to-date.
Our example keeps track of whether an element is visible or not, and maintains this
state in the browser's forward/backward navigation stack—as well as reflecting that
state in the browser address bar URL—so that the current state can be copied and
pasted or bookmarked:
<html>
<head>
<title>History Exmaple</title>
<script>
function showText(updateHistory) {
document.getElementById("long_desc").style.display = "block";
if (updateHistory) history.
pushState
(null, null, "?show");
}
function hideText(updateHistory) {
document.getElementById("long_desc").style.display = "none";
if (updateHistory) history.
pushState
(null, null, location.href.replace(/\?show/, ""));
}
function toggleText() {
var elem = document.getElementById("long_desc");
if (elem.style && elem.style.display == "none") showText(true);
else hideText(true);
}
function manageText() {
if (location.href.match(/\?show/)) showText();
else hideText();
}
window.addEventListener(
"popstate"
, manageText, false);
window.addEventListener("DOMContentLoaded", function(){
document.getElementById("toggle").addEventListener("click", function(e){
toggleText();
e.preventDefault();
return false;
}, false);
manageText();
}, false);
</script>
