Can javascript change the URL without refreshing the page?

JavaScript
1

Hello, I was wondering, with javascript is it was possible to change aspects of the URL such as the stuff after the address without re-loading the page.

I want to change this:

http://www.awebsiteaddress.com/index.html[COLOR="Green"]?information=true#position1[/COLOR]

to this:

http://www.awebsiteaddress.com/index.html[COLOR="Red"]?information=false#position2[/COLOR]

I dont need to change the address, just the stuff after it.

and for future reference, what is the technical name for the stuff after the address?

Thanks as always
ro0bear :smiley:

2

All the stuff following the “?” is called the query string. Everything following the hash symbol (“#”) is normally refered to as the hash value.

It is possible to change the hash value without refreshing the page but not the query string.

See this thread: http://www.sitepoint.com/forums/showthread.php?t=552076

3

It is not possible to update the querystring in the location object without the page being reloaded. Any assignment of new values to the location object from JavaScript will load a new page.

4

I see, thank you for such a quick reply.
So you can change the hash value without refreshing the page? I think I can work with that.
Thankyou
ro0bear :smiley:

5

Yes, that would be the equivalent of clicking a link like this:

<a href="#furtherinfo">Further info</a>

Which would take you to the part of the page where there is an element with the ID “furtherinfo”, e.g.:

<p id="furtherinfo">Blablabla</p>

It doesn’t take you to a different page so it isn’t a security issue.

6

Ive been having a play, and I’ve got stuck with something. I cant seem to stop the jumplinks from working, I need to disable them.

What I am doing is converting a html document with jumplinks, into a document where you can navigate through each section as a page. The html of other pages is still there, its just hidden with css ( display: none; ). Ive done it this way to help with accessibility.
The change from a long html doc to a short view by section/page only happens if you have javascipt enabled and is optional. I have tried changing the id with javascript to stop the jumping, but it doesnt work. The jump links dont seem to take any notice of javascript, only html. Is there a way round this?

thank you,
ro0bear :smiley:

7

You need to prevent the default action (which is to follow the link’s href attribute), using preventDefault() for good browsers and returnValue for IE. See this:

http://arapehlivanian.com/2008/05/16/a-nuance-of-preventing-default/

8

Thanks Raffles, thats great. I also found self.scrollTo(0, 0) to work, I am quite new to javascript, been working my way through “Simply Javascript” and “DHTML Utopia”. Would you suggest using preventDefault() over self.scrollTo(0, 0)? and are there any incompatabilities with self.scrollTo(0, 0)?

Thanks, I really appreciate your help
ro0bear :smiley:

9

Using the scrollTo technique is a more complex solution.

W3C has the preventDefault() method while IE has the returnValue property.
You don’t need either though as returning false is also guaranteed to work.

Putting Occam’s razor at work here, returning false is the simplest means by which to successfully do the job.

On the flip-side, if you do use the scrollTo method, you will in 6 months time have forgotten why it’s there so you will need to either document that statement by placing a comment near it to remind you why.

Simple is best. return false and you or anyone else will be able to tell what’s happening there.

10

Also, scrollTo(0,0) would jump up to the top of the page if the link you’re clicking is somewhere you scrolled to down the page.

11

You know, I’ve been scratching be head over a similar issue. I want to take the query string off the URL without refreshing the page. Is that possible, or would that count as changing the location? I can see how it might be a security issue.

12

Yes, it would count as changing the location. The only thing you can do without leaving the page is change the characters after the hash symbol (#).

13

Ah ok, thank you.

can you not just disable the code that interacts with the query string, removing the need for removing the query string (to an extent)?

ro0bear :smiley:

14

To the best of my knowledge Javascript cannot do this. jaavscript has many other known issues with redirection. It is better to use redirection within PHP or server side if possible in any case.