How to forward using Javascript without changing page URL?

Question

I have a home page, and I want to navigate to other pages, say blog or gallery, but without the URL in the address bar to change. I know it's possible on server side, but how to do in Javascript?

Here is my HTML/JS code:

//HTML
<ul>
  <li><a onclick="openPage('contact.html')">Contact Us</a></li>
  <li><a onclick="openPage('blog.html')">Blog</a></li>
  <li><a onclick="openPage('gallery.html')">Gallery</a></li>
</ul>

//Javascript
function openPage(url){
     //   All these will forward but will change the URL
     //window.open(url);
     //window.location.href=url;
     //self.location=url;
     //window.location.replace(url);
}

Initially, the URL will be http://something.com/mainpage.html

And it should stay the same even when navigating to any page.

This is a very simple example of what I have. So, is it possible on client side without server? If not, then what would be the simplest way to do it on server side? Assuming I'm using Java/JSF.

Why? All it will achieve is breaking the ability for people to bookmark or link to content. — Quentin
– Quentin, Commented Nov 1, 2012 at 7:21
@Quentin this example is very simple of what I want. In my application, the navigated-to pages will expire after short time, no need to bookmark them or even have the URL for those pages. — LetsFlow
– LetsFlow, Commented Nov 1, 2012 at 7:30

Community · Accepted Answer · 2017-05-23 12:03:28Z

2

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

please check this question in stackoverflow changing-the-url-without-reloading-the-page

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Nov 1, 2012 at 7:23

Ghostman

6,1129 gold badges36 silver badges53 bronze badges

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

2 Comments

LetsFlow Over a year ago

But I do want the page to reload since I'm navigating to a new page, no?

slebetman Over a year ago

Isn't that the exact opposite of what the OP wants?

anishsane · Accepted Answer · 2012-11-01 07:36:31Z

I will give you a hint. You can then write the code on your own.

Using ajax, fetch the entire page you want to open. (I assume that they are on the same server.)

Then parse the html.responsetext & find the body.innerHTML of the fetched page.
then use document.body.innerHTML=fetched_body_innerHTML;
Change the document.title also in similar manner.

I am assuming that both pages will have same CSS (for consistency in looks), and quite possibly, same js files loaded.

If you have different set of CSS &/or js files on the 2 pages, you will need to create additional nodes & delete old script/link nodes. (However, the result will not be identical, since old JS was already loaded & body.onload will not be triggered after you change the innerHTML of the body.

Collectives™ on Stack Overflow

How to forward using Javascript without changing page URL?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related