I am working on a web app using Firebase and Vanilla JavaScript. Let's say I have home page index.html, when user clicks to sign in, a popup appears where he will enter details. Since he signs in it means the URL should be localhost:5000/signin. Is it possible to do it with JavaScript from frontend or is there a need to add Node.js to redirect user respectively.
I am confused how this works and would appreciate if someone could explain how should I approach this.
You can change the url without changing or reloading the page in modern browsers.
window.history.pushState({}, 'Signin', '/signin');
Or you can use replaceState since you are using modal, however it will break back button functionality.
Please look at pushState
This will work:
<script>
function signin() {
window.open("/signin", "_blank", "width=500,height=300")
}
</script>
You can change width and height to your sign-in page width and height. Also, you can add some other properties to your popup. For more information visit https://www.w3schools.com/jsref/met_win_open.asp
This also might be helpful if you want to make your page maximized How to open maximized window with Javascript?
Related
I'm trying my hardest to properly implement my system with the Last.fm API, but I just cannot get it to work.
I am supposed to redirect the user to https://www.last.fm/api/auth?api_key=<API KEY>&cb=<CALLBACK>", which works perfectly fine as long as the user actually signs in. But if the user presses Cancel, you just end up at https://www.last.fm/api/None instead of the callback. Docs can be found here.
I tried to look into how other sites did it like openscrobbler.com, but the source code is unfortunately of no help. They also simply set the window's href to the right url with the same parameters as I do (logIn function here).
Alternatively I tried using a pop up window but that's also to no avail because I cannot access any of the data inside of the popup (CORS) and none of the events I tried (unload, beforeunload, close, ..) work.
Code I tried to redirect:
window.location.href = `https://www.last.fm/api/auth/?api_key=${api.lastFmApiKey}&cb=https://example.com/`;
And for the pop-up:
const popup = window.open(url, "Last.fm Login", `popup width=${loginWindowWidth}, height=${loginWindowHeight}, left=${left}, top=${top}`);
Any help with either getting the redirections to go right or a trick to get information from the popup window (when redirected specifically so I know when they are on the None page), would be greatly appreciated.
Thank you!
I have a website (e.g. www.foo.com) and redirect to another (e.g. www.bar.com) via window.location. Unfortunately the website runs in fullscreen-mode (so no address bar available) and the user interacts with it by touch inputs (no keyboard, no mouse).
Is it somehow possible to go back from www.bar.com to www.foo.com? Does jQuery do the trick?
UPDATE 1:
My problem is, that I dont have any access to www.bar.com.
history.back(); works fine, but I cannot just add another button to the
foreign website, can I?
To be more exact:
I refer from my website to www.google.com. How can I go back from www.google.com to my website?
If you advise me to use history.back() in the other website (e.g. here), please tell me how
I am very thankful
did you try window.history.back(); ?
I think you can do it with document.referrer It returns the URI of the page that linked to this page. w3c
the requeirment is that I want to avoid the specific web page to save to bookmark,
and is there someway to acheive this funcion just use some code, maybe add or js code . thanks
The answer is no, the user can always bookmark a page as this is browser function, but you can use sessions. Then make sure that any request for a page
must have an active session id or it returns an error or redirects to the home page. The user can bookmark the page but the bookmarks will then only work for a short time (until the session expires). This also has the added benefit of
making the site impossible to index by search engines.
The closest you're going to get is if you open another window using JavaScript as you can control whether the menubar and toolbar are displayed.
window.open(
"https://www.google.com/",
"Google",
"resizable,scrollbars,status");
However, this is likely going to be blocked by their popup blocker.
After a user has logged in via a fancybox (javascript) popup I wish to reload the parent page so they can access the logged in features.
Currently I am doing this with:
Continue
This works great, but the only issue is that it completely reloads the entire page: redownloads all the css & javascipt, etc.
All I want to do is reload the page normally, not a full refresh. How can I achieve this?
(I do not know the exact URL because the login can be done from any page via the fancybox, so I can't hardcode the URL.)
Another way of reloading the page i have seen in the facebook graph api is the following:
window.location = window.location
or in your case:
window.top.location = window.top.location
This solution reloads the page without trying to resend a POST request. Might be useful. for more information look at the following SO question.
Use:
location.replace(location.href.split('#')[0]);
The split on hash is required, otherwise an url with a hash will not be refreshed.
If you want to keep the previous load in browser history, use assign instead of replace.
href is not currently supported by Opera, according to MDN.
I want to know how Facebook is doing their iframe footer bar. I mean, i know they have an iframe on footer, but i want to know how they are reloading pages without reloading the iframe also, 'cause the iframe always stick there even though the page does reload again. Any ideas/knowledge?
EDITED:
Try clicking on a link which is different section and it changes the url and so far i know, if you try to change the URL, then the page will reload again. Also, try using Facebook on Chrome: you will see it reloads on every new page. It's not AJAX, because the URL wouldn't change if it was AJAX (do little research on URL changing, you will know).
Well, powtac pretty much gave you the answer: Facebook doesn't reload the whole page when you click a link, it requests the new content via XMLHttpRequest and refreshes only those portions of the page that change.
It's pretty slick about this: a naive implementation might not use real links at all, thus preventing you from opening, say, a different Facebook tab in a separate browser tab.
This technique - intercepting link navigation - also allows Facebook to use custom prompts when you try to navigate away without saving, and re-write paths as fragments, allowing it to track the current location in the URL without reloading the page.
FWIW, this question has already been asked and answered - see: How are the facebook chat windows implemented?