Modify url in browser using javascript?

Is it possible to change the url in the user's browser without actually loading a page, using javascript? I don't think it is (could lead to unwanted behavior), I'm in a situation where this would be convenient though:

I have a web app which displays reports generated by users. Layout roughly looks like:

-----------------------------------------------------------
 Column 1    |   Column 2
-----------------------------------------------------------
  Report A   |
  Report B   |  Currently selected report contents here.
  Report C   |

righ开发者_开发百科t now the user would be looking at a url like:

www.mysite.com/user123

To see the above page. When the user clicks the report names in column 1, I load the contents of that report in column 2 using ajax. This is convenient for the user, but the url in their browser remains unchanged.

The users want to copy the url for a report to share with friends, so I suppose I could provide a button to generate a url for them, but it would just be more convenient for them to have it already as the url in their browser, something like:

www.mysite.com/user123/reportb

the alternate is to not load the contents of the report in column 2 using ajax, but rather a full page refresh. This would at least have a linkable url ready for the user in their url bar, but not as convenient as using ajax.

Thanks

You can't change it in quite the way you asked for, but: The usual solution to this is to use window.location.hash, so the URL ends up being www.mysite.com/user123#reportb. Setting the hash doesn't cause a page load.

When the user's friend clicks the link, since the hash isn't sent to the server, you'll need to check it on load and do an ajax call (or what-have-you) to load the desired report.

This is (of course) the same mechanism anchors use, which you may or may not want to make use of. If not, make sure that the hashes you use don't match ids or anchor names in your page (and if so, of course, make sure they do).

Look into using the JQuery history plugin. It allows for back/forward navigation on AJAX sites as well as bookmarking (think Facebook style navigation in the URLs) and you don't have to write your own code/handlers for the hashes.

http://plugins.jquery.com/project/history

Interesting! But I feel changing the url will reload the page. Why not just show a text box with the URL. You can also think of providing a button to get the url into the clipboard directly (the user need not go to the url bar, select the url and then press ctrl+c.

If you change the url using javascript, the page will refresh/reload.

You can change the hash (the bit after #) without a refresh, but your application would need to read that on page load and figure out what to do.

window.location.hash = "#reportb";

then in your code on startup

if (window.location.hash == "#reportb") { load report b};

This is kinda considered a safety feature in your browser. You wouldn't want to hit a page "evilsite.com" and suddenly the url changes to "gmail.com" so you'd have no way to tell its not gmail.

If you want the selected report view to be bookmarkable, then don't do an ajax update. Do a full page refresh with the selection parameters included in the url.