Update URL parameter with javascript, without ruining the history? - javascript

I'm looking for a way to update the url in the status bar..
I have a gallery, and when you click your way through the gallery I want the image ID to show up in the URL, so that the user can link directly to the image..
I've read about using hash and so. but as far as I've tried it, that "ruins" the history.
If I click the back-button in my browser the previous image would be shown.
Is it possible to add or update a URL parameter, without ruining the history?
Thanks in advance

Use location.replace to replace the current location:
Replace the current document with the one at the provided URL. The difference from the assign() method is that after using replace() the current page will not be saved in session history, meaning the user won't be able to use the Back button to navigate to it.

Do it simply this way, when switching to images, add a hash to the url, for example:
location+='#image-'+image_id
your location will become
http://example.org/images/#image-3
instead of the initial
http://example.org/images/
and onload, check if location.hash is not empty, and matches with ^image-(\d+)$ (regular expression pattern), if it matches, do the usual thing you'd have done if a user clicks on image with id (\d+).
To preserve history, use reallysimplehistory.

Related

How to Replace the path name of URL using JavaScript/jQuery?

I am trying to replace the url and load the page.
Example:
URL: http://www.example.com/account/edit
I want to replace this as http://www.example.com/account/add. And load this page.
For that, I tried by using location.pathname.
location.pathname = "/account/add";
When using like above, the add page is displayed. But after that, URL http://www.example.com/account/add is loading. Then the add page is not displayed. I get that page is not found message.
The host name should vary based on running the project. So I want to resolve this without based on host name.
How can I achieve it?
If you want to retain the page in your session history (meaning you want to be able to use the back button to it) use the assign method. Otherwise, you replace.
Replace the current document with the one at the provided URL. The difference from the assign() method is that after using replace() the current page will not be saved in session history, meaning the user won't be able to use the Back button to navigate to it.
http://mdn.beonex.com/en/DOM/window.location.html
window.location.href = "http://www.example.com/account/add";
OR
window.location.replace("http://www.example.com/account/add");
This will redirect to the new page.
Actually you can change your url some other ways like below:
window.location.assign("http://www.mozilla.org"); // or
window.location = "http://www.mozilla.org";

Best way to pass a single-use value between requests using JavaScript

I need to trigger a page reload, via JS, preserving the vertical scroll position.
I'm using the solution described in another SO question:
Calculate the current scroll position
Add the current position as a querystring argument, then redirect
When the page reloads, read the value from the querystring & adjust the scroll pos
However, I only want to restore the scroll position on that FIRST redirect. If the user scrolls around the page and then triggers a manual reload using Ctrl-R, I do NOT want to re-scroll to that saved position.
Is there some way of passing a single-use, visible-to-the-next-request-only value using ONLY JavaScript? Or from removing a value from document.location.href without redirecting?
Should I be using the HTML 5 History API to "clear" the position value after I've consumed it?
Save the value to sessionStorage. Once you use it, delete the value so it cannot be read on a manual refresh.
sessionStorage.setItem("scroll_position", "300");
sessionStorage.getItem("scroll_position"); // 300
sessionStorage.removeItem("scroll_position");
sessionStorage is really well-supported -- it'll will work fine for IE8+ any relevant version of the other browsers.
StackOverflow handles after-page-load scrolling by storing post id's in the URL hash. You could do that as well.
The url stackoverflow.com/...../21485393#21485393 has #21485393 which matches an anchor element <a name="21485393"></a> It will automatically scroll to that element after the page loads.
You could do something like that as well.
http://your.url.com/page#300
Retrieve it with
window.location.hash
And remove it once you're done by
window.location.hash = ""

Issue with hash url in javascript?

I am using url hash to scroll the page. What i am doing is, say i have 2 pages :
Page1 and Page2
First i navigate from page1 to page2 and set the url hash than my url will become :
http://localhost:48785/page2#id
I am setting hash using this code:
window.location.hash = "id";
Than i press browser back button and went to previous page i.e. page1. Upto this point everythings work fine.
The Issue occure when i set hash twice on page2. Like:
http://localhost:48785/page2#id
http://localhost:48785/page2#id2
Now when i press browser back button, it just navigate back and forth between hash #id and #id2.
Why the back button not taking me to the previous page i.e. page1 after setting hash twice on page2 ?
That's the way the browser back button is supposed to work. It goes back to the last url change in the browsers history.
it looks like you can use history API like it described here http://www.thecssninja.com/javascript/stealing-history-api
enter link description hereyou can History API and try and remove the history from the browser so that you can get out of the loop
Because HTML5 : 6.6.9 : Navigating to a fragment identifier says:
When a user agent is supposed to navigate to a fragment identifier, then the user agent must run the following steps:
Remove all the entries in the browsing context's session history after the current entry. If the current entry is the last entry in the session history, then no entries are removed.
This doesn't necessarily have to affect the user agent's user interface.
Remove any tasks queued by the history traversal task source that are associated with any Document objects in the top-level browsing context's document family.
Append a new entry at the end of the History object representing the new resource and its Document object and related state. Its URL must be set to the address to which the user agent was navigating. The title must be left unset.
Traverse the history to the new entry, with the asynchronous events flag set. This will scroll to the fragment identifier given in what is now the document's address.
This is done so that links within a document can be backed out of in the same way that links between documents can. User confusion might result if hitting the back button only served as an undo for some link navigation and not others, especially when scrolling can cause a complete change in the content displayed.

Change URL Dynamically Without Adding Previous To History Stack

A stackoverflow question URL includes a servlet, id#, and title like so...
stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page
My webiste works the same way with URL's like so...
localhost:8443/user/1/admin
The query I do on the backend to get the users info only requires the id number. The name of the user after that is just for show. So if you typed this into the browser for localhost:8443/user/1/a it would give you the exact same page as this localhost:8443/user/1/admin
Stackoverflow is capable of noticing that the end part of the URL is missing and add it back. So if you put this into the address bar
stackoverflow.com/questions/824349/modify
They will change it to this dynamically
stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page
Now I did reading about changing URL's dynamically on stackoverflow and everyone kept referring to history.pushstate so I tried it. The problem with this is it adds the incorrect URL to the history stack. What I would like to accomplish is change the URL to the path it should be and not include the wrong URL to the history stack. So if the user decides to go back they go back to the actual page they were on last not, stackoverflow.com/questions/824349/modify. Just like stackoverflow does it. How could I do this!?
Check out the replaceState method.
Try using history.replaceState instead of history.pushState

Using hash value in photo gallery

I try to create a navigation for my photo gallery using hash values.
When I click the "Next" link, I get value of the hash and then post it to the another backend php script using jquery $.get() api and also set the new hash value for that link. Everything works fine but the hash doesn't update itself with every click. It usually takes 2 clicks to get the updated hash value.
Can anybody here tell me on how I could go about fixing it.
Update hash manually, using
location.hash = '#new_hash';

Categories

Resources