0

For a new web app I would like to modify history when users click on a link, so that the URL changes, but the page does not reload. I'll have some part of the page load in ajax. This can be done easily and is documented in a lot of places (e.g. Mozilla, diveintohtml5, Stack Overflow).

However, I'm wondering if there's a way to let the user modify the URL without reloading the page. Say for example someone gives them a link within the same domain, or they want to manually type the URL for some reason. I'd like to load the new page in the same way as I would if they had clicked a link - without reloading the page but rather modifying the history.

Is there any way to do this? Here's the gist of what I was thinking, but the magic functions getNewURLFromEvent, preventUserFromActuallyLeavingPage, and carryOn need to be implemented (if possible):

window.addEventListener('unload', function(event) {
    var newURL = getNewURLFromEvent(event);

    if (isInThisDomain(newURL)) {
        preventUserFromActuallyLeavingPage();
        window.history.pushState('content', 'title', document.URL);
    } else {
        // Let the user leave (the internet is a free place after all)
        carryOn();
    } 
});

function isInThisDomain(URL) {
    /* Would probably implement some error checking here too */
    var thisDomain = document.URL.match(/:\/\/(.+?)\//)[1],
        thatDomain = URL.match(/:\/\/(.+?)\//)[1]);

    return thisDomain === thatDomain;
}

function getNewURLFromEvent(e) {
    /* Figure out where the user want's to go */
}

function preventUserFromActuallyLeavingPage() {
    /* Since we're changing the content it still looks
        like the user's leaving, but really they haven't
        gone anywhere from the site's perspective */
}

function carryOn() {
    /* Essentially do nothing, but maybe more magic is needed? */
}

If you feel this is a bad idea - yet still possible - please explain why it's a bad idea.

Thank you.

Community
  • 1
  • 1
redbmk
  • 4,687
  • 3
  • 25
  • 49
  • 1
    I'd say even if it's possible it's probably a bad idea if the user isn't expecting that behaviour. – John Carter Mar 19 '13 at 21:39
  • Well, if I were on https://github.com/nnnick/Chart.js and clicked on Chart.js, the URL changes to https://github.com/nnnick/Chart.js/blob/master/Chart.js and the file I'm looking at changes, but the rest of the page remains the same. I was thinking if I typed in the second URL from the first one, why not have the same functionality? – redbmk Mar 19 '13 at 21:53

1 Answers1

0

Any change the value of the address bar, other than using a URL hash, will instruct the browser to go to that location. You cannot (and should not) change this behaviour. This would open a whole can of worms regarding URL cloaking and other malware nastiness.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • So, basically the best way to handle this would be to just throw a hash after the domain and any links would have to contain that (e.g. http://www.example.com/#this/is/a/page) – redbmk Mar 19 '13 at 21:50
  • A url hash is often used to maintain the state of a page. When the page loads, you have JS look at the hash value, then manipulate the UI accordingly. See: http://gtv-resources.googlecode.com/svn/trunk/examples/location-hash-html.html#3 – Diodeus - James MacFarlane Mar 20 '13 at 14:33