Changing the URL without reloading the page

Question

I would like to know if it's possible to change the contents of the URL in the browser without reloading the page?

I use jQuery and Ajax to load new parts of my page. When I choose "product one", the direct link would be mysite.com/product1 and for "product two" would be mysite.com/product2, but I don't want to reload the site to these pages.

score 14 · Answer 1 · answered Apr 03 '11 at 09:58

14

its now possible with HTML_5..

chack this link... http://www.spoiledmilk.dk/blog/?p=1922

also facebook and google using this tric beside Hash(#) attribute

answered Apr 03 '11 at 09:58

Pavel

149
1
2

Great! For cross browser support you can use a library like history.js https://github.com/balupton/history.js – Pepper Jul 08 '11 at 19:09
Blog post is not found – derpedy-doo Dec 06 '19 at 19:13

score 13 · Accepted Answer · answered Aug 01 '10 at 08:25

13

You will have to add hash # if you want to prevent page from reloading.

The css-tricks.com has an excellent screencast on that, have a look at:

Best Practices with Dynamic Content

answered Aug 01 '10 at 08:25

Sarfraz

377,238
77
533
578

Sparky · Answer 3 · 2015-12-19T07:14:44.563

7

This is possible in HTML5. See a demo here.

You can change the URL to another URL within the same domain, but can not change the domain for security reasons.

See the history interface in HTML5 specification for details.

edited Dec 19 '15 at 07:14

answered Jul 01 '12 at 06:05

Sparky

4,769
8
37
52

score 7 · Answer 4 · edited Nov 29 '13 at 01:05

7

just use this one

window.history.pushState("object or string", "Title", "/new-url");

edited Nov 29 '13 at 01:05

answered Dec 18 '12 at 05:13

naveen

1,078
1
13
26

Watch out for IE < 10: http://caniuse.com/#search=pushstate. Use a polyfill like history.js. – Johann Feb 24 '15 at 22:31

score 1 · Answer 5 · edited Oct 11 '12 at 13:44

1

Yes, it is possible using the HTML5 History API. Check this page and this example

edited Oct 11 '12 at 13:44

Adi

5,089
6
33
47

answered Jul 25 '12 at 14:03

Manolis Georgopoulos

11
2

score 1 · Answer 6 · answered Nov 20 '10 at 13:12

You CAN do that. Though likely you'll need a modern browser. Have a look at this page: http://www.20thingsilearned.com/ created by the Google Chrome team (I used Chrome 9 to read it). Changing pages doesn't reload the entire web page, but changes the URL.

score -4 · Answer 7 · answered Aug 01 '10 at 08:27

-4

You can't. Only if you change the hash, like sAc told you.

But.. May I ask WHY?

answered Aug 01 '10 at 08:27

Ionuț Staicu

21,360
11
51
58

2

I'm not the OP, but I find it useful when you change your content via ajax, and then your visitor wants to store the page he is looking at to bookmarks/send via email/ etc.. – nothrow Aug 01 '10 at 08:43
Like Yossarian said, that was one of my reasons. Also because the load of the page loading is less using ajax, and the loading of contens is better looking. – Paul Peelen Aug 01 '10 at 19:43
@Yossarian: I asked why he wants to use site.com/product, like the initial Q was (not hash). @Paul: if you change more than 4-50% of your page content, you may want to rethink your strategy, because the speed you will gain with page transfer will be canceled by the DOM operation time :) – Ionuț Staicu Aug 02 '10 at 06:18
Wrong answer. In HTML5 it is posible to do that. – sasa Apr 03 '11 at 10:49
1

@Sasa, agree. But try to do that in IE9 :) – Ionuț Staicu Apr 07 '11 at 08:18

Changing the URL without reloading the page

7 Answers7

Linked

Related