How To Change Page URL With JavaScript

Question

I am newer to JavaScript and I am working on a website where I want to be able to switch the URL when I click on certain elements of the site without reloading the page.

I want it to work like http://www.itemcycle.com when you click on the link to sell your iPad or iPhone and then select your model. It shows different boxes, and when you click on them, it changes the URL but I know it's not loading a new page because it doesn't scroll me back to the top.

Thanks in advance for your help!

Possible duplicate of Modify the URL without reloading the page — WirelessKiwi
– WirelessKiwi, Commented May 12, 2016 at 8:32

Wild Widow · Accepted Answer · 2016-05-12 08:30:18Z

1

what you are seeing is a single page application

A single-page application (SPA), also known as single-page interface (SPI), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application.

It will be achieved by using certain JS frameworks. AngularJS is the popular one.

edited May 12, 2016 at 8:30

answered May 12, 2016 at 8:27

Wild Widow

2,5794 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alexis Over a year ago

It can be achieved with a lot of other framework, or without framework.

Wild Widow Over a year ago

@Alexis yes, edited my answer. I'm a big Angular fan :)

Husni Salax · Accepted Answer · 2016-05-12 08:27:39Z

0

Try this:

window.location.href="/yourUrl";

answered May 12, 2016 at 8:27

Husni Salax

2,0181 gold badge21 silver badges30 bronze badges

Comments

Naqash Malik · Accepted Answer · 2016-05-12 08:28:48Z

0

HTML5 introduced the history.pushState() which allows you to add and modify history entries.

window.history.pushState('page1', 'Title', '/page1.php');

This might worth looking.

answered May 12, 2016 at 8:28

Naqash Malik

1,8261 gold badge13 silver badges14 bronze badges

Comments

winhowes · Accepted Answer · 2016-05-12 08:31:29Z

There's 2 main ways to redirect a user, each with it's tradeoffs:

You can redirect a user to a new page by changing the value of window.location.href. So for instance window.location.href='https://example.com'; will redirect a user to https://example.com. Note this will do a hard page reload, so the page will actually reload.
To change the url path without redirecting the user to a new page you can do use history.pushState. Doing something like:

history.pushState({}, "page 2", "/page2");

will change the url from https://example.com to https://example.com/page2 and the scroll position won't change. You can then listen to changes from history.pushState and update the page accordingly giving you effect you're looking for. Note you cannot change the domain (i.e. you can't go from https://example1.com to https://example2.com), but on the plus side the page will not actually be reloaded.

As others have pointed out there are various frameworks which allow you to do this type of thing, but those frameworks are making use of the techniques I've described above.

Collectives™ on Stack Overflow

How To Change Page URL With JavaScript

4 Answers 4

2 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Linked

Related