Capturing the browser tab reload and tab close functionality - javascript

I want to call an ajax to other pages on the browser or tab close. When we reload tab or close tab it calls onbeforeUnload and onUnload events.
If I reload page either by pressing ctrl+r or by pressing enter in address bar it should reload page without any prompt and if I click close of browser or tab or I press ctrl+w keys it should prompt that "Changes you made might be lost" and if user click leave it should close tab and call an ajax, else it should stay on page.
Can anyone help me with this?
Thanks in advance

Most of the browsers intentionally block popups triggered in onbeforeunload, for known reasons.
But if you want to preserve users' data from erasing, you can engage window.localstorage property.

Related

Window close in javascript

I need to end a user session only in case when user closes the window. I want to retain session if the user refreshes the page or hard reload the page(chrome) with ctrl+shift+r.
I have read post on this forum about usage of window.unload method but this method is called also in case of user refreshes the page with F5 or hard reload it or keep his cursor in address bar and hit enter. I only want to end the user session in case he close a tab or window.
Thanks,
Hitesh
You can not do it in pure HTML5. This is a security feature of modern navigators.

How to automatically logoff user whenever the user closes the tab

I am working on dotnetnuke website. I want to logoff the user when he closes the browser or tab. Please help me to resolve this. How can I detect browser close event and how can logout the user.
You can't detect the browser close or tab close using javascript.
Only you can know the page unload, the following events are OnBeforeUnload &
OnUnload
Neither of these events can tell you the way that you closed the page.

Fire onbeforeunload only when window is closed (includes working example)

I want to fire the onbeforeunload event only when the tab or browser is closed and not upon refresh, link click and so on. I found a site where that works: https://checkout.deindeal.ch/
Steps to fire the event in Chrome:
Put something into the cart
Click on "Zur Kasse"
Close tab
onbeforeunload Message is shown and a popup opens. onbeforeunload events like refresh will not fire. I debugged their code, but could not find the place where they exclude those events or whatsoever.
Anyone out there who can find the correct place in the code?
Thanks!
For readers that want to use onbeforeunload,
The event onbeforeunload should be used for preventing user's data loss, like filled in forms and other data that are not saved and will be lost upon page refresh.
Using onbeforeunload to prevent a user from leaving your page is annoying and will not stop the user from leaving.
You can not detect a browser tab refresh button press, unless the user use a shortcut that you can detect with key press (like Ctrl+F5).
More info here :
javascript beforeunload detect refresh versus close
Old answer was removed in order not to mislead anyone (it was not working on nowadays browsers).
More stack overflow links related on onbeforeunload use:
How can i get the destination url in javascript onbeforeunload event?
How to prevent calling onbeforeunload when page refresh
Fire onbeforeunload confirm alert for external sites only

How to allow popups when url loads if it is NOT a physical click by the user in js

I want to allow popups when site loads and if the root cause of an event is NOT a physical click by the user, then it's getting blocked. any help
My code:
$("#buttonBtn").on('click',function(){
openpopup('temp'+id)
});
$("#buttonBtn").trigger('click');
Thanks in advance
With this, if you explicitly click, popup appears. If user comes to this button via keyboard and press Enter or something, I guess this would not be triggered.
$("#buttonBtn").click(function(e){
e.preventDefault();
// some job you will do if clicked, for example, open popup
});
Great example here
You can generally open popups by using window.open. However, most browsers have built-in popup blocker where the user will be notified about a popup and will be asked if he really wants to show it.
The MDN has an informative article about window.open. It also gives some information about popup blockers:
How can I tell when my window was blocked by a popup blocker?
With the
built-in popup blockers of Mozilla/Firefox and Internet Explorer 6
SP2, you have to check the return value of window.open(): it will be
null if the window wasn't allowed to open. However, for most other
popup blockers, there is no reliable way.
Source: https://developer.mozilla.org/en-US/docs/DOM/window.open

Browser window close and tab close

I want to create a JS function that detect only browser close and tab close functionality.
I used this code from http://ykyuen.wordpress.com/2011/02/22/jquery-javascript-capture-the-browser-or-tab-closed-event/
I works for me but when i place a cursor on address and hit enter it goes to kill page method. I need only to show alert when tab or browser is closed.
I am afraid this is not possible.
You cannot really make a distinction. When the user navigates away from your page in any way, you get the same events (beforeunload, unload). You can do some tricks (like in the link posted) whether the user clicked any of the links on your page or submitted one of your forms, but you cannot really differentiate between the refresh button, back button, the user entering a new address, the user clicking a bookmark, close tab, close browser, etc.

Categories