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.
Related
Question: Is it possible to modify the current URL that's shown in browser's address bar and browser history?
To be specific, I only want to modify the URL that is visible to the user; I don't want to trigger navigation. (I have a Gatsby app, and Gatsby is using Reach Router.)
Motivation: I have a gallery of images that the user can click and navigate to URL such as /images/?id=52. The advantage of this approach is that /images/ can be prefetched to enable instant rendering of the page. However, this scheme is unfriendly to users who have disabled JS, as they will see no images at all when they navigate with query parameters. So I have also prerendered pages like /images/52/ that work without JS. So what I want to do is navigate the JS users with query parameters, but then modify the URL that they see to a URL that can be shared with anyone including non JS users.
What I think you're looking for is either window.location.replace() or window.location.assign()
Replace is merely visual, so if the user were to copy the URL to share with their friends you can manipulate that url that they see and copy.
Assign loads a new document, as if the URL you passed it is the one that got the document.
https://developer.mozilla.org/en-US/docs/Web/API/Location/replace
https://developer.mozilla.org/en-US/docs/Web/API/Location/assign
Edit: a comparison
Difference between window.location.assign() and window.location.replace()
I believe you'll need to create a NodeJs server to handle this sort of action. It can take a query parameter from the URL ('images/?id=52') and then return the user to the URL 'images/52'.
Or you may be able to use the 'gatsby-source-filesystem' package.
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.
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 am looking for a way to use Jquery (or any other open source script) to pull the URL of a particular webpage. I am working on a service that will pull the original URL of any webpage - consider a scenario where I load google.com but have entered yahoo.com in the address bar (without pressing enter key) - the script should be able to validate if the the URL on the address bar is the same as the actual URL or if it is different.
There is no way to do this. And there better not be any in the making. There is no reason to need such information, and it's a violation of user privacy.
No dear, Absolutely no way to do this.
and i agree with #bjb568 , its definitely violation of user privacy.
you can get the current page URL in your script.
But why you need this kind of functionality.?
i will advise you to find any alternative of your requirement,
You can get the current location of the page using regular Javascript, but I do not think you can get the currently typed address bar, although I do not see where you should ever need to.
In response to everyone on here saying it is a breach of user privacy: I don't think grabbing the URL or the typed address bar on the current page is a breach of privacy or security unless you are somehow able to change the address bar to make it seem like you are on a different site - like being on Google.com and it saying you are on Yahoo.com. But, from the OP's original question, it just seems like he wants to get the information; not change it.
Using Javascript, you can use var location = document.location.href
The closest you can get to change the addressbar is window.history.pushState(), but browsers have a security settings that do not allow domains outside of the current domain to be used.
My first question that comes to mind: "Why on earth does he want to do that???" If it was possible you would have to interact with each browser directly which is not possible.
jQuery is just a client-language that interprets with each browsers "engine" (that handles rendering of html, javascript etc) and not the browser itself (menus, settings etc). Secondly, if it would work: How often would you check? Each keypress? Every 10 seconds? It would not be doable in a proper way - even if it was possible.
I think you should rethink your issue and try to explain why you want to do this. It might be other (better) solutions that would handle your issue in a better way.
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.