i have an AJAX driven website/webapp and use HTML5's history API to control browser URL, back-buttons ect.
The URL is einzelstueck-shop.com
On initial page load, i determine the URL path to get the home section via AJAX.
This is pretty simple:
if(!target) {
target = removeSlash(window.location.pathname);
}
if(target == '' || target == '/') {
target = 'home';
}
Then i do my AJAX stuff and if successfull, i do this:
// change doc title & history
var title = $('.slide-button[data-nav-target="'+data.target+'"]').attr('data-nav-title');
console.log(title);
document.title = title + ' - Einzelstück';
window.history.pushState("", document.title, data.target);
console.log('History code is executed, current document.title is: ' + document.title);
Now, the title
variable is the value of data-attributes I gave to all elements that trigger a navigation change. The title
is 100% correct. I put in a console.log to show it.
data.target
is the original target
passed from the AJAX call.
Everything works in FF and IE. In Chrome, if you access the site without a path, e.g.
einzelstueck-shop.com
or einzelstueck-shop.com/
, i successfully get redirected to /home
and the title changes to Home - Einzelstück
for a brief second. But then it changes the document.title
to the current URL. And i don't get why.
I removed all other code but this still happens. There is no other place in the app where the document.title could be changed. This only happens on initial page load. Using the navigation or accessing the site with a path e.g. einzelstueck-shop.com/home
or einzelstueck-shop.com/ringe
everything works as expected.