Search code examples
jqueryhtml.htaccesshistory.js

Alternate to Redirect Page


I am attempting to figure out how to do history state manipulation and I saw a site that had a nice feature that if you put anything after the slash, the site will still load but in an incomplete state due to a flaw in the state machine. I was wondering how do you get the site to catch the address and forward like that? My only guess is to change the .htaccess file, but I'm not sure where to start for that...

http://bufmi.org/ (this is the site)

http://bufmi.org/about (this is the example of a site)

http://bufmi.org/foobar (this still loads the site, but not an actual page)

They have it set up that no matter what you put in after the slash it goes to the site, how did they accomplish that?


Solution

  • This is achieved by some script that fires depending if you are at the root URL or not and a .htaccess rewrite rule to add the hash to anything other than the base url.

    The .htaccess part is handled with something like this:

    RewriteRule ^([a-zA-Z0-9_-]+)$ /#$1 [NE,R]
    

    This section of scripts.js is responsible for the root URL check looks kind of like this:

    if (document.URL == urlroot){
        //Applies Class to set of elements
        $('.example').removeClass('example-class', 0);
    } else {
        //Applies Class to different set of elements
        $('.example2').removeClass('example-class', 700);
    }
    

    If you are not at the root URL a series of if/else if check to see if the content for the fragment identifier exists. If it exists, content is loaded into a specific section on the page from one html file using anchors on that page. If the fragment identifier does not match any of the if/else if sections in scripts.js, then the anchor Blank on the mater.html page is used to display an empty content section.