If I start writing post in Facebook and then either close or refresh page, Facebook somehow recognizes each of these actions (Reload site vs Leave site).
In javascript there's onbeforeunload event that gets called when webpage is about to unload, but how does Facebook manage to recognize if page unloads due to browser close or browser refresh function? Event doesn't contain that information afaik.
window.addEventListener('beforeunload', function(e) {
// this is browser refresh or close?
});
Related
I want to implement logout functionality when user closes the tab. I am storing JWT tokens in my local storage which are needed to be cleared every time user closes the tab without clicking the 'Log out' button in my React.js application.
All over the internet, I find 'beforeunload' event being used, but I think it gets fired when we refresh the page or navigate to other page via clicking a link, which is not what I want.
Also, is there a way to find if user closed the tab or the window in JavaScript?
Any help would be appreciated. Thanks.
Try beforeunload event listner
window.addEventListener("beforeunload", function (e) {
//Log Out Call
}
But it will not work in all browsers.
I want to prevent users from reloading the page each time to get updated dynamic content. So I have used this code:
window.onbeforeunload = function() {
return "Dont need to reload the whole page. Just reload the section";
}
It's working fine except when an user closes the browser's tab/window, the same message is showing also. But I want to show the message only for reloading/F5 button, not for closing the browser's tab/window. What event handler should I have to used for that purpose?
You can physically disable the f5 button, to get functionality similar to what you want:
Disable F5 and browser refresh using javascript
I have a web application, and I want to disable the Back button.
I read and found that I can open the browser without the navigation controls with the function window.open(...).
This is the code:
window.open (mywebappURL,"mywindow","status=1,toolbar=0");
I tried to put it in my Main.Master page, but I get an infinite loop and the new window is opened as a popup window of my application.
Does anyone knows where should I put this code to get my web application opened in a browser without navigation buttons?
Thanks,
Inbal.
try this on the link's onclick() event
function openPopup(){
var pathname = (window.location.pathname);
window.open(pathname+'somePopup.html','','width=800,height=450,resizable=yes,dependent,screenx=80,screeny=80,left=80,top=20,scrollbars=no');
return false;
}
and in the html
click me
To answer your question directly, make sure the window you're opening is a different URL than the window that's initially visited. So your visitor might arrive at www.example.com/index.html which then opens www.example.com/popup.html
If you open index.html again, the new copy will immediately open a popup, which will immediately open a popup, and there's your infinite loop.
However, as several people have commented already, this is generally discouraged. Among other disadvantages to this approach, popup blockers will likely interpret this as trying to launch a popup advertisement, forcing your visitors to recognize what's happened and change their settings.
I have a web app with some 'safety' code which causes a page reload if the server (Socket.IO) connection goes silent for more than 5 seconds (generally customer site firewall/broken-proxy issues).
The Socket.IO connection stops as soon a new page starts loading, but the safety code doesn't see this. Navigating to a slow page causes the safety code to fire and jump you back to the previous page.
I need to be able to tell (just before this code causes a reload) whether the browser is currently waiting for a new (slow) page to load.
What approaches are there to doing this, other than putting a jQuery click event on every link (which would not catch navigation via the address bar)?
Thanks,
Chris.
Monitoring window.onbeforeunload would do the trick. Fires right after the user starts navigating away.
Try typing this in the Chrome Console on any page and click on any link:
window.onbeforeunload = function () { console.log("oh noes"); }
My recommendation: fix your code so that you don't reload the page when the socket disconnects. Problem solved.
Edit
I suppose you could simply set a variable such as isReloading when the page reloads. You'd need to monitor onbeforeunload as well, and check what happens first: disconnect or the unload event. If the disconnect happens first, you're getting disconnected. Trigger the isReloading flag and reload. In the onbeforeunload check whether the flag was set. Reverse the concept of checking whether a slow page is loading: check whether you are reloading.
My webapp has a CLIENT_CERT based JAAS authentication. I am using IE7.
When I click on logout, it takes me to my home page. Now clicking on the back button, the user should remain on the same page, which I acheived using history.forward() javascript. But the certificate dialog comes up since the previous page was secured.
How can I avoid the certificate dialog from not coming and also remain on the non-secure home page when user clicks on back button after logging out.
The only way to disable the back button within a window is to use location.replace() for every single interaction, which you cannot do if you need to submit any forms unless you target them to a hidden iframe and then do a location.replace() in reaction to the iframe's onload event once the form is submitted. This is really nasty and complicates everything.
The other technique to avoid users going back through pages (some online banking sites do it this way) is to launch the secure section in a new window, and have logout close it (you can force a close in IE with window.opener = null; before window.close();.