You might think this is a duplicate, but it's not. I've seen the other SO answers about changing the browser url with replaceState() but I have a problem...
On one webpage on my website, it receives a lot of parameters, so the link goes on and on and on... I did replaceState(), and it shortened the URL by a lot. That worked. If I go on another link, and I go back in history, the URL will still be the same that I defined on replaceState() and the page gives a 404 error. Is there a way to just load the link the way it is and then temporarily change the URL so the user doesn't see a huge link but the system uses the actual URL?
I'm using JSP, go ahead and give me answers in JavaScript, JQuery, or Java.
You could store the parameters in localstorage (ie a cookie) then have your next page un-pick them from localstorage, thus reducing the size needed of the URL in the frst place. Example code (stolen from Storing Objects in HTML5 localStorage) :
// add to storage
localStorage.setItem('myAttibute', 'acceptable');
// Retrieve the object from storage (on another page)
var sMyAttibute= localStorage.getItem('myAttibute');
alert("myAttibute=" + sMyAttibute);
Hopefully it'll tell you that my attribute is acceptable.
Related
I know about setting and getting URL parameters, e.g. example.com/index.html?x=foo&y=bar&z=hello would give your javascript access to the x, y, and z variables specified in the URL.
What I wish for is the same behavior but utilizing the file path part of the URL. E.g. example.com/index.html/foo/bar/hello.
How can I accomplish this? In particular,
How can I make sure the browser knows to go to index.html even though the file path index.html/foo/bar/hello was specified?
How can I update the URL to example.com/index.html/foo/bar/world, such that if I press "Back" on the browser, it will go back to example.com/index.html/foo/bar/hello.
Furthermore, I'd heavily prefer if the solution was in pure javascript/html, without reliance on jquery or any other libraries.
There's 2 scenarios you should handle.
What if the user is on a foreign page and wants to visit your page using the link example.com/index.html/foo/bar? This should be handled on the server not on the client side.
If the user is already on some page, say example.com/index.html and wants to go to example.com/index.html/foo/bar, you may use the pushState method. You may look at https://developer.mozilla.org/en-US/docs/Web/API/History/pushState to change the current URL & and this https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate to do something when the user presses the back button.
I have a webpage which is linked to from a number of different webpages, a user clicks a link on one of the parent pages, arrives at the webpage and completes a task. When the task is complete the user needs to be redirected to the previous page.
I'm aware I could use the window.history.back() / window.history.go(-1) functions - however what i'd really like is something which the browser considers a 'forward' action so as not to confuse the users if they click the forward/back button after a redirect.
I've tried using document.referrer but this gets blanked in the event of a page reload on the webpage.
The solution would need to be compatible back to IE8 (unfortunately!). Any suggestions would be much appreciated.
Fetching referrer URLs can be unreliable no matter which language you use https://stackoverflow.com/determining-referer-in-php
The best option is to pass the parent url to the task along with the data that you are already sending, despite the initial time outlay (updating the parent pages to do this) it would be the most reliable.
You could try and do a similar thing with a session or cookie to store the url upon starting the task, but it depends on how you have written the current task as to wether you would still need to modify the parent pages.
What about providing a parameter (it may be even the whole url to go after the action) that will let the page know where to go? (like login pages usually do).
It will probably imply modifying all your pages, so it may not be a solution in your case.
I have a page that used Ajax to generate the a list of result. Then there is a link to click to another detail page. When I'm at the detail page, and click the back button. The list of results page will reload again. Is there anyway to stop the ajax to reload again and cache the result. Also is there anyway to cache the position also.
thank you for your help
A few projects I had bookmarked regarding the AJAX/back button management
https://github.com/browserstate/history.js
https://github.com/tkyk/jquery-history-plugin
Regarding your second question, if your browser supports local DB you may cache the result there. The following project provide a uniform API across browsers.
https://github.com/marcuswestin/store.js
https://github.com/alexmng/sticky
Position can also be stored in the localDB.
You can save state by changing the window.location.hash property. The hash is the only part of the URL that you can change and not force a reload of the URL.
window.location.hash = 'some-id'; will translate into your URL looking like this: index.html#some-id.
You can then get the hash when the page loads and set the UI to the proper state:
if (window.location.hash == 'some-id') {
//setup UI for `some-id` identifier
}
https://developer.mozilla.org/en/DOM/Storage
Store your data with a timestamp of some sort. Check to see if you have stored data and that it's not older than you would like it to be. If it's older, fetch new data. If not use the stored data.
(it's not mozilla specific)
http://caniuse.com/#search=local%20storage
You can use the new HTML5 LocalStorage system to build a cache. Here's a link: http://playground.html5rocks.com/#localstorage
I've a link on my webpage, say 'about'. Clicking on it loads a particular div without refreshing the whole page using jquery .load(). This does not change the URL string in the browser address bar.
The same page can be accessed by going to www.mydomain.com/?page=about.
So what I want to do is, when the user clicks on the 'about' link, the pages will be loaded as it is (using jquery), but I want to change the URL string in the browser address bar also so that someone can actually copy or bookmark the exact page.
Is it possible to do so??
You have two possibilites to tackle this problem:
In newer browsers you can make use of the HTML5 history API, which lets change part of the URL, also the query string (and path afaik).
In browsers which don't support this, you can only change the fragment identifier # without reloading the page (via the location object). That means you have to change the URL to e.g.
www.mydomain.com/#!page=about
#! is a convention from Google to make Ajax sites crawlable. As the fragment identifier is not sent to the server, you have to detect it with JavaScript and load the corresponding data from the server.
There are jQuery plugins that help you to handler this.
I would look for a good plugin makes use of the history API if available and falls back to the hash based solution.
As written in my comment, you can also find more information here:
How to change browser address bar without reloading page, especially #ThiefMaster's answer.
Yes, I've done it by doing
location.hash = 'foo';
There's other attributes of location you can change, not sure what it's called for '?', probably query-string, get, or soemthing like that.
This question already has answers here:
How can I change the URI without refreshing the page?
(5 answers)
Closed 9 years ago.
How can I just change the get parameter without redirecting?
parent.location.search = "?after=20";
// ok that changes, but also redirect to the new page
Any solution? Or answer is no, if its no, please write big no.
Update
Since this is the accepted answer, and no longer true, refer to this duplicate question for up to date information.
Original answer follows:
NO
You can come close with the anchor portion of the URL which is accessible by the hash property of the location object
parent.location.hash = "whatever value you want";
If your aim is to use the query string to store some state that can later be restored from a bookmark, you should use anchors instead.
However, if you must change the query string for some reason, actually there is a way. However, I don't endorse this. I'm just mentioning it for completeness.
When a server returns a 204 No Content response, most browsers won't do anything -- i.e. won't even attempt to transition to another page or even wipe the current page. What you can do is to make the backend just emit a 204 response when a request is made to the same page that was just served, with a change in the query parameters.
By now the answer is YES
At least in HTML5, which means all major browsers (IE10+)
Does Internet Explorer support pushState and replaceState?
http://caniuse.com/#feat=history
You can also check my answer on another SO question:
How can I change the page URL without refreshing the page?
You cannot alter the querystring (ie. the part that stars with the ?) without reloading the page from the server. You can however use page anchors like http://www.example.com/page.html#anchorname to affect the url without reloading a page from the server.
Uh, no - if you change the URL parameter, your browser will load the new page.
You can't do this because it would be a security risk if you could.... If pages could change the value in the URL bar, it would be easy for page put up by a phisher to change that value to appear to be a page on your bank's website.