Can any one give a working example for history.replaceState? This is what w3.org says:
history.replaceState(data, title [, url ] )
Updates the current entry in the session history to have the given data, title, and, if provided and not null, URL.
This works perfectly:
history.replaceState( {} , 'foo', '/foo' );
URL is changing, but title is not changing. Is that a bug or am I missing something? Tested on latest Chrome.
replaceState() The History. replaceState() method modifies the current history entry, replacing it with the state object and URL passed in the method parameters. This method is particularly useful when you want to update the state object or URL of the current history entry in response to some user action.
replaceState() will change the URL in the browser (ie. pressing the back button won't take you back) pushState() will change the URL, and keep the old one in the browser history (ie. pressing the back button will take you back) Follow this answer to receive notifications.
In an HTML document, the history. pushState() method adds an entry to the browser's session history stack.
Indeed this is a bug, although intentional for 2 years now.
The problem lies with some unclear specs and the complexity when document.title
and back/forward are involved.
See bug reference on Webkit and Mozilla. Also Opera on the introduction of History API said it wasn't using the title parameter and probably still doesn't.
Currently the 2nd argument of pushState and replaceState — the title of the history entry — isn't used in Opera's implementation, but may be one day.
Potential solution
The only way I see is to alter the title element and use pushState instead:
document.getElementsByTagName('title')[0].innerHTML = 'bar';
window.history.pushState( {} , 'bar', '/bar' );
Here is a minimal, contrived example.
console.log( window.location.href ); // whatever your current location href is
window.history.replaceState( {} , 'foo', '/foo' );
console.log( window.location.href ); // oh, hey, it replaced the path with /foo
There is more to replaceState()
but I don't know what exactly it is that you want to do with it.
history.pushState
pushes the current page state onto the history stack, and changes the URL in the address bar. So, when you go back, that state (the object you passed) are returned to you.
Currently, that is all it does. Any other page action, such as displaying the new page or changing the page title, must be done by you.
The W3C spec you link is just a draft, and browser may implement it differently. Firefox, for example, ignores the title
parameter completely.
Here is a simple example of pushState
that I use on my website.
(function($){
// Use AJAX to load the page, and change the title
function loadPage(sel, p){
$(sel).load(p + ' #content', function(){
document.title = $('#pageData').data('title');
});
}
// When a link is clicked, use AJAX to load that page
// but use pushState to change the URL bar
$(document).on('click', 'a', function(e){
e.preventDefault();
history.pushState({page: this.href}, '', this.href);
loadPage('#frontPage', this.href);
});
// This event is triggered when you visit a page in the history
// like when yu push the "back" button
$(window).on('popstate', function(e){
loadPage('#frontPage', location.pathname);
console.log(e.originalEvent.state);
});
}(jQuery));
look at the example
window.history.replaceState({
foo: 'bar'
}, 'Nice URL Title', '/nice_url');
window.onpopstate = function (e) {
if (typeof e.state == "object" && e.state.foo == "bar") {
alert("Blah blah blah");
}
};
window.history.go(-1);
and search location.hash
;
The second argument Title does not mean Title of the page - It is more of a definition/information for the state of that page
But we can still change the title using onpopstate event, and passing the title name not from the second argument, but as an attribute from the first parameter passed as object
Reference: http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/
According to MDN History doc
There is clearly said that second argument is for future used not for now. You are right that second argument is deal with web-page title but currently it's ignored by all major browser.
Firefox currently ignores this parameter, although it may use it in the future. Passing the empty string here should be safe against future changes to the method. Alternatively, you could pass a short title for the state to which you're moving.
I really wanted to respond to @Sev's answer.
Sev is right, there is a bug inside the window.history.replaceState
To fix this simply rewrite the constructor to set the title manually.
var replaceState_tmp = window.history.replaceState.constructor;
window.history.replaceState.constructor = function(obj, title, url){
var title_ = document.getElementsByTagName('title')[0];
if(title_ != undefined){
title_.innerHTML = title;
}else{
var title__ = document.createElement('title');
title__.innerHTML = title;
var head_ = document.getElementsByTagName('head')[0];
if(head_ != undefined){
head_.appendChild(title__);
}else{
var head__ = document.createElement('head');
document.documentElement.appendChild(head__);
head__.appendChild(title__);
}
}
replaceState_tmp(obj,title, url);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With