Changing page urls without redirecting

Question

I want to show the user a url of the item i am previewing him on the main page. This will help my users locate the main page of that item. I have seen a similar example on facebook. Now a days, when you click on a posted image on facebook, it previews the image in a theater mode, when you refresh the browser, it will take you to the main page of that image. I tried methods mentioned below.

location.hash="/example";

This is not what i want because i dont just want to change the hash property. I want to change the url. The next thing i tried out is the pushState property of window object. This is not working in IE so this will not work for me.

window.history.pushState('object',"title goes here","New_location_goes_here");

Can anyone help me. Thanks in advance

Answer 1

The preview you mention in facebook is done using AJAX (XMLHttpRequest) to load the preview behind the scenes and add it to the current page.

There is a common widget called lightbox and many descendants of it to choose from. Check out the wikipedia lightbox article.

This doesn't change the URL in the browser's address bar, if that's what you're after -- the question seemed unclear to me on that point -- these (AJAX) methods work without altering the current URL address.

---

(Sourabh, thanks for the clarification)

One approach to this could be to append the preview item to the URL, for example

http://example.com/stuff/pageA

could become

http://example.com/stuff/pageA/preview1
http://example.com/stuff/pageA/preview2
(or)
http://example.com/stuff/pageA?preview=preview1
http://example.com/stuff/pageA?preview=preview2
(or)
http://example.com/stuff/pageA/preview1.png
http://example.com/stuff/pageA/preview2.png

The server-side handler for pageA would change to handle pageA/* and would still load the same page, but also load the preview picture in a lightbox.

Changing the hash, which you say you don't want to do, can remain on the same page and load a preview, and can be bookmarked, but changing the URL, unfortunately, will have to make a trip to the server.

Answer 2

Well, you can use jQuery.uoload() method and makse some ajax call to php file and session varible. Then on page load just check is that varible is set and redirect to it. Unless there is some fix for pushState for IE.

There where few questions avout pushState on IE:

pushState fallback for Internet Explorer?

Does Internet Explorer support pushState and replaceState?