jQuery how do you change the address bar URL without reloading?

hey guys,

is there a way of editing the address bar of the page without reloading the page?

eg
http://domain.com/. Click a button and the url becomes
http://domain.com/hello

Edit: I used this but it puts a hash before the new value ie http://domain.com/#hello

Is there a reason you want this? Normally, if you click a button, it takes you to another page?

I don’t think there’s a way, because /hello would be a directory.

You use ajax or? It’s possible to have history with jquery (here is plugin http://tkyk.github.com/jquery-history-plugin/) but it’s impossible to have it with structure like this “/asd” because browser would detect it as new page, so you will always see “#” in url (with this, browser knows it’s DOM and not new page to load)

is it possible to add a get value in the url without reloading? eg http://domain.com?k=value

Well for what i know you cant change the url without reloading a page…but if theres a way, let me know

To change the url path in the browser you have to update window.location, and that always refreshes the page.

If you could change the URL path via javascript, think of the security implications. It’d make phishing even more of a problem (change the URL to a bank’s URL and give you a login form, for example). So browser’s don’t allow this (you can change the hash/fragment, just not the path).

I assume you’re looking at this for some AJAX functionality. My method was to change the hash/fragment value and then detect this on page load in order to make it bookmark-able. Good luck :slight_smile:

On the other hand, maybe it’d be worth looking at this: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries

Some new functionality in HTML5 apparently.

EDIT: See history.replaceState() perhaps? https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_replaceState().c2.a0method

sevenspark said

On the other hand, maybe it’d be worth looking at this: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries

Some new functionality in HTML5 apparently.

EDIT: See history.replaceState() perhaps? https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_replaceState().c2.a0method

I saw that but its html 5 and IE has problems allergic to it, I think ill go have to with page reloading :smiley:

wizylabs said

I saw that but its html 5 and IE has problems with it

Naturally :slight_smile: haha hopefully it’ll work there in the future, because that could greatly improve/simplify AJAX apps

I think this might be considered a security issue so browsers would block JavaScript functions like this. It’s the kind of thing a phishing website would do so typically these types of access are not allowed.

Even Facebook and Twitter are using the Hash symbol to change there URL without refreshing everything.
I used the same method for my WP template, didn’t find a better way. The hardest thing to do is to read that hashed URL and load the right content if for example you’re sending a specific link to someone or even to twitter!

Parallelus said

I think this might be considered a security issue so browsers would block JavaScript functions like this. It’s the kind of thing a phishing website would do so typically these types of access are not allowed.

security issue on same domain? cross-domain attacks are something else…

he is just asking how to change url lol…xss, xsrf are something else

modern phishing attacks are done through code injections (vulnerable parameter exploited)

ewizz said
Parallelus said

I think this might be considered a security issue so browsers would block JavaScript functions like this. It’s the kind of thing a phishing website would do so typically these types of access are not allowed.

security issue on same domain? cross-domain attacks are something else…

he is just asking how to change url lol…xss, xsrf are something else

modern phishing attacks are done through code injections (vulnerable parameter exploited)

Clearly you have no idea what you’re talking about. It’d be a security issue because for instance, a website could claim to be redirecting you to pay via paypal, and it’d be changing the actual url (http://www.fakephishingsite.com/paypal-trick-lol-im-a-script-kiddie.php) to display as (https://www.paypal.com/).

landonw said
ewizz said
Parallelus said

I think this might be considered a security issue so browsers would block JavaScript functions like this. It’s the kind of thing a phishing website would do so typically these types of access are not allowed.

security issue on same domain? cross-domain attacks are something else…

he is just asking how to change url lol…xss, xsrf are something else

modern phishing attacks are done through code injections (vulnerable parameter exploited)

Clearly you have no idea what you’re talking about. It’d be a security issue because for instance, a website could claim to be redirecting you to pay via paypal, and it’d be changing the actual url (http://www.fakephishingsite.com/paypal-trick-lol-im-a-script-kiddie.php) to display as (https://www.paypal.com/).

oh mister Smart A**, are you always so smart or it’s just today?

he is talking about URI changing not complete url…uri is other part after .tld (like /index.php)

best wishes ^^

I won’t continue arguing any further.

ewizz said
landonw said
ewizz said
Parallelus said

I think this might be considered a security issue so browsers would block JavaScript functions like this. It’s the kind of thing a phishing website would do so typically these types of access are not allowed.

security issue on same domain? cross-domain attacks are something else…

he is just asking how to change url lol…xss, xsrf are something else

modern phishing attacks are done through code injections (vulnerable parameter exploited)

Clearly you have no idea what you’re talking about. It’d be a security issue because for instance, a website could claim to be redirecting you to pay via paypal, and it’d be changing the actual url (http://www.fakephishingsite.com/paypal-trick-lol-im-a-script-kiddie.php) to display as (https://www.paypal.com/).

oh mister Smart A**, are you always so smart or it’s just today?

he is talking about URI changing not complete url…uri is other part after .tld (like /index.php)

best wishes ^^

My understanding of browser security is it doesn’t matter if it’s URI or URL, it’s blocked deliberately. If it was not being blocked by the browser you should be able to do it. So far nobody seems to have come up with a solution that doesn’t involve a hash “#” in it.

An example of changing the URI being a security issue would be a site that provides customer pages as sub-directories of their domain: “mycompany.com/myUserName”, like Facebook for instance… If allowed by the browsers without a refresh, I could add some JavaScript to spoof this URI and make it look like you are viewing “mycompany.com/tos” or “mycompany.com/login”. See how it’s a security issue now?

It isn’t blocked because of security, it’s blocked because browser can’t recognize if it’s new page to load or same…that’s why # (hashchange tag event) is added, so browser know it shouldn’t load new page…don’t understand how you guys can’t figure out simple things like this lol

You’re trolling right? Please tell me you are.

wizylabs said

hey guys,

is there a way of editing the address bar of the page without reloading the page?

eg
http://domain.com/. Click a button and the url becomes
http://domain.com/hello

Edit: I used this but it puts a hash before the new value ie http://domain.com/#hello

Luckily, using a hash is the only way. Otherwise it would have been a total party for phishing lovers. :smiley:

Back in time there was an agreement in ECMA that such a feature would be totally unsecure, so all browsers keep this rule. :slight_smile:

I’ve done it with #. Pretty much the only way to do it. On its own it’s nothing, but with a bit of javascript it can become useful. Really depends on what you’re trying to achieve.

Generally you add some # content at the end like: yoursite.com/#?foo=moo yoursite.com/#?bar=cow when you’re loading something on the page with ajax and you would like the user to be able to navigate back/forward and bookmark the page.

No point loading all your different page content via ajax on yoursite.com if the user can’t bookmark it or back/forward navigate.

This bit of javascript might help you on the way. It should detect the # on page load and redirects to the real page.

eg: it will redirect yoursite.com/#?foo=moo to yoursite.com/?foo=moo on page load.

        var current_hash = location.hash;
        current_hash = current_hash.replace(/#/,'');
	if(current_hash.length>1){
		// we have something after the #. redirect as if the # wasn't there.
		window.location.href=current_hash;
	}

check out how facebook works with it’s #, navigate around a bit and then hit the refresh button, notice how the url changes to what was after the #.

could also check out various jquery history plugins like: http://tkyk.github.com/jquery-history-plugin/#demos to get some ideas on how to deal with # and ajax.

my 2c