Geek Answers Handbook

Page refresh returns to the main page when using History.js in ie9 and below

I created a site that uses the History.js plugin to navigate from page to page using AJAX and updates the URL accordingly. Everything works well except IE; when you refresh a page, it essentially loads the content from the first page you came to, not the contents of the current page. In “decent” browsers, it doesn’t download content from any page, it just loads the entire page for that URL, which is what IE should do.

I think he does not understand what to do with the hash. If you visit http://www.crownacre.voyced.com/contact-us/ , it works fine, but when you visit http://www.crownacre.voyced.com/#contact-us/ (with a hash) it not this way.

I tried redirecting the page if I found # in the path name, but there is no way to detect this, since window.location.pathname and History.getHash () return the path without any hash.

Any suggestions? I saw several sites using this plugin that have the same problem and similar problems here, but have no solution.

Thanks in advance!

+6
source share
3 answers

This worked for me:

<script> var url = new String(document.location); if (url.indexOf("#") > -1) { alert("There is a Hash in the path"); } </script>

Edit:

 function LocationTest() { var loc = window.location; alert(loc.href); alert(loc.protocol + "//" + loc.host + loc.pathname + loc.search + loc.hash); alert(loc.href == loc.protocol + "//" + loc.host + loc.pathname + loc.search + loc.hash); }

Example source: .location window explained

+2
source

I encountered the same problem when rewriting tarheelreader.org. I use History.js and it works fine except for the upgrade issue in IE8. This hack works for me.

In my startup code, which only runs when the start page loads, I do:

 var url = window.location.href; if (url.indexOf('#') > -1) { // ie refresh hack controller.stateChange(); }

where controller.stateChange() is the state change handler that I use for all history changes.

 function stateChange() { // handle changes in the URL var hist = History.getState(), url = hist.url, context = hist.data; renderUrl(url, context).then(function(title) { document.title = title; }); }

You can see all the code in main.js and controller.js at https://github.com/gbishop/TarHeelReaderTheme

Edit Further research led History.js to use the source URL instead of the root. This hack seems to handle this case.

 function stateChange() { // handle changes in the URL var hist = History.getState(), url = hist.url, bar = window.location.href, context = hist.data; //console.log("State changed...", url, context); if (url != bar && bar.indexOf('#') > -1) { //console.log('bar = ', bar); // I think we only get here in IE8 // hack for hash mode urls var root = History.getRootUrl(), hashIndex = bar.indexOf('#'); if (root != bar.slice(0, hashIndex)) { // try to fix the url url = root + bar.slice(hashIndex); //console.log('new url =', url); window.location.href = url; } } renderUrl(url, context).then(function(title) { document.title = title; }); }
+3
source

Possible solution: Could you use the unofficial version of History.js 1.8a2 of my plug: https://github.com/andreasbernhard/history.js

... and give feedback? Thank you very much!

+1
source

More articles:


All Articles