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.
Related
I have a React/React-Router application that is required to know the context on how users landed on the page. There could be two different cases (1) 302 redirection (2) client-side redirection.
Let me add use cases to give more details around it
(1): users directly hits the URL and landed on a page
(2): Users clicked a button and are redirected to another page via Link API.
I noticed that the react router props contains history object and on (1) case, the history action is POP while on client-side redirection cases (2) it was either PUSH or REPLACE. Would it be a good assumption that I can honor the history action and determine 302 redirection by checking the action === POP?
to suit your particular your use case there are multiple approaches on how we can achieve this let's go over a few you referred to in question
User clicks on a button: so if we have full control over the functionality of a button we can define multiple parameters if a user clicks on it e.g. we can add a query parameter on the forwarding url and on the next page we know where the user came from kinda like this www.example.com/?referrer=oldButton this would indicate clear patterns on how a user came to the page. or in terms of react router, we can pass additional params to access later on another component.
history.push('/path', yourData);
users directly hits the URL and landed on a page: you assumed correct we can use POP, PUSH, REPLACE methods to identify how the user came to land on a specific page. a browser use what we call history, it keeps a record of every page visited before or after another, we can either use it directly or through react-router
Hope that helped :)
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 am making a simple web app and the service provider I am using authenticates through the OAuth 1.0 protocol. I would like to know how to extract a param after user signs in from a separate browser window and grants access. I have done this before in Objective-C for an iOS app using an event, but am unaware how to do it using a browser and using JavaScript. I assume I do something similar using an addEventListener() or onClick() type method? Also, can this quickly be achieved using a JQuery method? Details below.
I want to:
Open a separate window to allow the user to sign in.
User will then 'GRANT' access, at that point, the page will reload with the newly appended parameters to the URL.
I then need to extract the params, which are the verifier and token oauth_verifier=verifier&oauth_token=token, from the URL after user signs in.
Something to note:
The service provider does not allow a callback. The user need to pass oauth_callback=oob for the param.
The link below is what I come across often while searching for an answer, however it just describes how to open a new window and point the user to a URL:
How to open a new window and insert html into it using jQuery?
Thank you for your help!
If you open a new window with JavaScript, as described in the link you found, can you then access the location property to read the URL parameters?
var w = window.open();
console.log(w.location);
Maybe you need to check the value every 10 seconds with a setInterval or something, to get the new URL value once it updates after your user signs in.
Hope this helps!
Do not put any authentication information in the URL as it is not protected and can be intercepted.
You can use localStorage to store authentication information and have that be available between different browser windows.
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'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.