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, Nov 01 '12 at 07: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, Nov 01 '12 at 07:30

score 2 · Answer 1 · edited May 23 '17 at 12:03

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 '17 at 12:03

Community

1
1

answered Nov 01 '12 at 07:23

Ghostman

6,042
9
34
53

But I do want the page to reload since I'm navigating to a new page, no? – LetsFlow Nov 01 '12 at 07:28
1

Isn't that the exact opposite of what the OP wants? – slebetman Nov 01 '12 at 08:43

score 0 · Answer 2 · answered Nov 01 '12 at 07:36

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.

How to forward using Javascript without changing page URL?

2 Answers2