Changing URL when users visit with jQuery

Question

I have to make this happen using jQuery...

When users visit any page on my website (coming from another site) this has to occurs (the pathname varies)

http://www.mywebsite.com/pathname/

become

http://www.mywebsite.com/#!/pathname

I need help with the syntax.

Many thanks for your time and help.

Just FYI, the jQuery Address plugin is a good tool to do this kind of job: http://www.asual.com/jquery/address/ — James Chen, Aug 03 '11 at 02:26
I'm using it... it makes all my internal links go from http://www.mywebsite.com/pathname/ to http://www.mywebsite.com/#!/pathname but i don't know if I can and how to set it up to make this behaviour when links are coming from the outside of the site. — Gab, Aug 03 '11 at 02:32
You might want to look into something like Apache's `mod_redirect` or `mod_rewrite`. — Jared Farrish, Aug 03 '11 at 02:42

Jared Farrish · Accepted Answer · 2011-08-03T12:54:56.503

2

$(document).ready(function(){
    var pieces = location.href.split('/');
    if (pieces[3].indexOf('#!') !== 0) {
        if (location.href.indexOf('#!') != -1) {
            pieces = location.href.replace('#!','').split('/');
        }
        pieces[3] = '#!/'+pieces[3];
        location.href = pieces.join('/');
    }
});

To hide content:

// I don't know you actually need this, since it may hide content
// in some cases when the redirect may not work, which might give
// the user a blank white page.
// Alternatively, you could use CSS as Ben notes, although you would
// only need display: none on the body tag.
$('body').ready(function(){$(this).hide();});

// Note, this is NOT in a handler.
var pieces = location.href.split('/');
if (pieces[3].indexOf('#!') !== 0) {
    if (location.href.indexOf('#!') != -1) {
        pieces = location.href.replace('#!','').split('/');
    }
    pieces[3] = '#!/'+pieces[3];
    location.href = pieces.join('/');
}

Demo: http://jfcoder.com/test/redirect.html

edited Aug 03 '11 at 12:54

answered Aug 03 '11 at 01:55

Jared Farrish

48,585
17
95
104

Nice solution! It relies on there being two slashes in the URL, but that's a safe assumption to make. – Benjamin Atkin Aug 03 '11 at 02:10
Thank you it works! I'm currious, is there a way to make sure it works even if the url is http://www.mywebsite.com/blog/pathname/ ? Where the site is actually hosted in blog directory – Gab Aug 03 '11 at 02:29
1

You would change the `pieces[]` number to be equal to how many `/`'s over from the left you need to go. If it's one level, like `http://mywebsite.com/blog/#!/pathname`, you would need to use `pieces[4]`, since there are four `/`'s. – Jared Farrish Aug 03 '11 at 02:41
Oh, one problem, I see the content of http://www.mywebsite.com/pathname/ before it redirects to http://www.mywebsite.com/#!/pathname/. Is it because it's using a $(document).ready(); because I tried using $(window).load(); and I still see the content of the first page. Is there a work around? – Gab Aug 03 '11 at 04:31
If this is in the head you could add a style tag. Paste this inside the if statement and use the load handler: http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript/524721#524721 Change the CSS to `body { background-color: white; } body * { display: none; }`. Also change ready to load. This should hopefully work. – Benjamin Atkin Aug 03 '11 at 06:07

score 0 · Answer 2 · answered Aug 03 '11 at 01:57

You don't need to do this using jQuery. You can just use window.location.href = "new url";

However if you insist...

var url = $(location).attr("href");
var path = url.substring(url.indexOf("com")+3);
var newurl = "http://www.mywebsite/#!" + path;
$(location).attr("href",newurl);

score 0 · Answer 3 · answered Aug 03 '11 at 02:00

0

You can try this (untested):

var pathname = window.location.pathname;
var hostname = window.location.hostname;
var newPath = pathname.replace(pathname, "#!" + pathname);
window.location.href = hostname + pathname;

answered Aug 03 '11 at 02:00

karim79

339,989
67
413
406

score 0 · Answer 4 · answered Aug 03 '11 at 02:57

0

for what it's worth

var blah = document.referrer.substr(document.referrer.indexOf("/")+2);
if(blah.substr(0,blah.indexOf("/")) != location.host) location.href = (location.host + "/#!" + location.pathname);

answered Aug 03 '11 at 02:57

Joseph Marikle

76,418
17
112
129

Changing URL when users visit with jQuery

4 Answers4