I want to detect when the user closes the browser while my website is active
Since I am storing data in my local storage, I need to know when this event takes place in order to delete that data that I previously saved in local storage.
I am working with onbeforeunload to be able to capture the events, only this is activated when you press "f5", close the browser and close the page, I need to know how to validate so that it is only activated when I am closing the browser, could you help me?
I leave the small fragment of code that I implement, it is worth mentioning that I am working with React
function App() {
window.onbeforeunload = function(evt) {
localStorage.clear(); return '';
}
return (...)
}
Related
so I want my app that when I close the tab is to clear the localStorage, so I tried this:
window.addEventListener('beforeunload', function (e) {
e.preventDefault();
this.localStorage.clear()
e.returnValue = '';
});
But the problem is it also runs when I refresh the page so the items on my localStorage gets cleared even on refresh and now I have to re log in again, is there a function that only detects when I close the tab?
I don't think you can. There is very limited information about what goes on in a browser outside of your app. Many of these functionalities are available through particular APIs instead of being directly exposed.
I suggest using session storage as this is its default behaviour and intended use.
This remind me that you can only know that a 'POP' action was dispatched when a user clicks the back or forward buttons. You cannot know which one of them was pressed though.
Manually deleting webpage html elements of poorly written websites has been one way I have been able to bypass restrictions on most websites. I need to also make such restrictions without logging out users to keep intruders restricted.
What I'll like to do: I'll like to logout the user after an interval of inactivity, but because data not saved might be lost in the process, I'll like to use a modal dialog to lock the screen and ask for the password without redirecting to a login screen
Here is an image below indicating what I mean:-
I'll like to know if there's an event fired by the browser when this is done. I saw on a website, once you inspect the browser page(open browser backend), it crashes the page, when the browser back end is closed it reloads. I have no code to show because I didn't see any single code that has resolved this issue.
EDIT:- I finally found a code that does a bit of what I want, but I'll settle for an actual event than an infinite time to check if its opened or not.
var element = new Image;
var devtoolsOpen = false;
element.__defineGetter__("id", function() {
devtoolsOpen = true; // This only executes when devtools is open.
});
setInterval(function() {
devtoolsOpen = false;
console.log(element);
document.getElementById('output').innerHTML += (devtoolsOpen ? "dev tools is open\n" : "dev tools is closed\n");
}, 1000);
I was finally able to capitalize on the code above and made it more functional, now I can lock screen without files being lost or if an intruder is trying to delete from the inspect element, they are prevented, even if the page reloads, it remains locked prompting user to still log in. it's secure now. thanks
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'm trying to call a JavaScript function from an ASP.NET MVC view (.html) using Action Link/Hyperlink()/Link Buttons. Left click works good, but right clicking the link and choosing 'Open a New Tab or Page' is not working.
My attempt so far has been:
<a href="#" onclick=aFunction()>link</a>
aFunction(object)
{
alert('Inside Javascript Function')
}
Use the approach mentioned in this answer: How to run function on new tab from main tab? (Google Chrome)
Basically you would store the function in local storage and on page load event of the page this links open, you would check if there is a function stored in the local storage, and if so, then execute it.
This answer might help.
Try giving your hyperlink an id attribute (say, id="foo"), and create a click handler that performs a specified action whenever a#foo is right-clicked:
document.getElementById("foo").onmousedown = function(event) {
if (event.which == 3) {
alert('Inside Javascript Function');
}
}
EDIT:
Per your comment:
I don't want to execute the function as soon as the user right click. I want execute the function after the user right click the link and click open new tab option.
I don't believe this is possible (unless there is some arcane Chrome JavaScript API that detects such an event). It wouldn't make sense for JavaScript to know how Chrome works. Further, JavaScript is sandboxed in such a way that it doesn't have access to the user's local file system - by extension, it should not know what the Google Chrome process itself is doing.
I am using javascript to detect when a user leaves a page on my website. So I can detect when a user is leaving one of my pages but I dont know whether the user is going to another page in my website or outside my website.
I want to determine when the user is going to a page outside my website, so I can write to my server when the user left my site & record how long they were in my site (my own website analysis like googles).
So I know I can use javascripts onbeforeunload or onunload to detect when a user is leaving a page in mywebsite, but is there also a way to determine if they are going to an outside webpage(not any page in my site)?
Maybe there are some parameter passed with the onbeforeunload message/event?
function closeIt( param1 )
{
// where param1 maybe "http://...google.com";
if ( "MYSITE" in param1 ) { // they are going to a page inside my site }
}
window.onbeforeunload = closeIt;
There is nothing you can do to know where they are going if they did something outside of your page to leave.
If they clicked a link on your page to leave your site, you can log stuff with the click event and try to record it, but you run into problems with browsers leaving before your call is made.
I think there shouldn't be a way to get the URL of a page outside your site. If there was it would violate the privacy of the user