want to detect browser close event? - javascript

I am working on any application in which i need to detect that whether user close the tab or browser so I can disconnect the user from other user basically its an chat application.
I have used :-
window.onbeforeunload = confirmExit;
function confirmExit() {
if(needToConfirm) {
return "Leaving this page will end your conversation.";
}
Its work fine, when I try to close the browser or tab it shows an popup with message "Press OK to continue, or Cancel to stay on the current page."
I want to perform task when user click on Ok button and if he press cancel then will stay on current page.
Please Help me :(
Thanks in advance
Ansh J

This is not possible.
You could handle the unload event and send an AJAX request there, but that might not be completely reliable.
The best solution is to send an AJAX hearbeat every x minutes, and consider the user disconnected if you stop receiving the heartbeat.

Go the other way around: when you receive the Unload event, send the server a message that informs the user is about to disconnect. The server waits for some time and then automatically disconnects.
Then, if the user click cancel and stays on the page, you send a message to the server to inform that the client is still alive.
The downside is that, if the user waits too long to click cancel, he might be disconnected.

Why not have the client's periodically 'ping' the server to let it know that they are still there, and if a user misses say 3 pings then it will be marked as logged off?

Related

Enable setTimeout when the mobile has screen switched off

I have on the client side (mobile) a timer (setTimeout()) which triggers refreshing the token on the server side by sending a post message to the server.
That timer does not seem to trigger sending a message to the server when the screen timeout on my mobile is on and the screen is black.
How can I enable triggering even if the mobile has the screen switched off.
I don't think there is a a way for angular to know when a page is locked. You could track any input or page movements instead and reset a timeout timer so that if the page stays idle for a while you could send a request to the server. That being said you would probably want the page timeout to be decently long to avoid closing a session while a user is still using the page. What you can also do is have a warning message pop up when the timeout is reached that prompts the user to say they are still using the page, if they click yes reset the timer again otherwise close the session.

Cookie is not deleted on browser close?

Scenario:
For example: Anonymous User enters my website xyz.com, I have to show a popup "Hey welcome", If user opens a new tab without closing the browser and enters xyz.com then we should not show the popup again. If the user closes the browser and come back again to xyz.com then we have to show "Hey welcome".
Note:
No server-side involved. Need a client side solution.
What I tried:
I have tried cookie without expiry
document.cookie = "welcome=true";
But cookie is not deleted on close of browser.
No, luck with onbeforeunload and unload Since event is triggered on page refresh
Any idea or suggestion will be grateful to solve this issue.

Close browser tab

I have a page that tells users to go to their email and click verification link. When they do, the link in the email message opens a new tab, so now the user has two tabs open, both related to email, which is a bit confusing.
Is there any chance to have them click the link in their email and open confirmation within the first tab or
Open the new tab but at the same time close the original tab?
There's gotta be way with JS, I hope.
No, but you could run a Javascript in your first tab that pings your server every 10 seconds or so, to check if the account was confirmed.
If it was, then the page redirects itself to the new user's dashboard (or some other "main account page").
setInterval(function(){
$.get('/api/is_confirmed.php').then(
function(response){
if (response.status_code == '200')
window.location = '/dashboard.php';
}
);
}, 10000);
I would advise against self.close()ing the window. Do not interfere with the user's control of the browser tabs. Having tabs suddenly disappear by themselves is unexpected for the user and annoying at best, frightening at worst.
You can check periodically from the 1st tab if the email got activated then close it window.close() , thus the remaining open tab would be the 2nd one, typically, you would implement something like that using setInterval and an ajax request to your server backend to check if the email was activated or not yet.
One thing you could do is:
1- Instead of having a link to your page in that email, put a link to a special page that changes a database value then closes itself.
2- On the main page, have a thread constantly poll that database value and as soon as you see the change, update the page with ajax (or refresh) then bring the broser on top of other windows.

Clear session on window close

I am working on a examination project, When user starts a test it open in new window by window.open(). If user close a test before it finish then session creates a problem so I want to clear session when user close the browser window or hide/disable close button before test completes.
nothing you come up with here will not be overrulable by the user; welcome to client-side programming (the actual browser "close" button is not within your reach). You can tap into onclose (lots of sites do this in order to pop up a confirm("do you want to leave this page?") dialog) but even that is very easy to bypass by anyone who knows how to open a browser console (F12 on every browser, for example) because they can just redefine window.confirm = (() => true); and not get bothered by confirm dialogs.
Partial solution would be to use the onbeforeunload and send a request back to the server once it is invoked.
Once the request is received on the server, you can destroy the session.
Again, this is easy to bypass on the client side but does provide extra functionality.
window.onbeforeunload = function() {
// AJAX to server
};
You could use this answer here:https://stackoverflow.com/a/1119324/1489237
That would give you that message "are you sure you want to leave this page?"
On that function,instead of a message you can submit an ajax that will call a script to do a session_destroy() before closing the page.
I think you can set session expiration time to be few seconds? and perform ajax requests to maintain it, while student is answering questons
Can you use popup block with iframe inside?
<div id="test-popup">
<iframe src="/test/12345">
</div>
And open it with JS:
$('#test-popup').show();
This is for example only. You need more CSS and JS to make it works.

How to detect if browser is in the process of loading a new page

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.

Categories

Resources