Develop Reference

Alert not showing on browser close after doing reload of the browser, same issue is there in stackoverflow website also

I have to show the alert on browser close and refresh for a particular page. Below code is working for all scenario but it is failing in below scenario.
1. First, do the refresh, then the alert will come and ask for reloading, now do the reload.
2. Now click the browser close button
Issue:- Now alert not coming in chrome and Mozilla browser, In Edge on refresh, alert is coming multiple time my code is:-
window.onbeforeunload = (ev) => {
let msg;
debugger;
if (sessionStorage.getItem('previousPage') === 'employee') {
return 'Are you sure you want to navigate away?If you navigate away, your information will not be saved.'
ev.preventDefault();
}
return msg;
};
Please assist me how can I handle this scenario?

Try this, quite similar to this: Clear localStorage on tab/browser close but not on refresh:
window.onbeforeunload = function (ev) {
window.onunload = function () {
let msg;
debugger;
if (sessionStorage.getItem('previousPage') === 'employee') {
return 'Are you sure you want to navigate away?If you navigate away, your information will not be saved.'
ev.preventDefault();
}
return msg;
}
};

Fancybox Modal with jquery cookie to open once on page load

I have a modal that opens in fancybox. I can fire this modal on page load by clicking the open modal button with jquery:
$("#download-brochure-button").fancybox().trigger('click');
I am trying to set a cookie so that this only opens once per session. I am looking in the chrome inspector under application tab and I cannot see any cookie being generated. I am using jQuery Cookie to handle the cookie but I must be doing something wrong. Here is my js:
//Brochure Modal with cookie
$(document).ready(function(){
var check_cookie = $.cookie('brochure_modal_cookie');
if(check_cookie === null){
$.cookie('brochure_modal_cookie', 'value', { expires: 7 });
$("#download-brochure-button").fancybox().trigger('click');
}
});
Currently no modal shows and no cookie can be seen. Any and all help greatly appreciated.

I fixed this by using the updated https://github.com/js-cookie/js-cookie plugin.
My working code:
//Brochure Modal with cookie
Cookie = Cookies.get('brochure_modal_cookie');
if (Cookie == null) {
$("#download-brochure-button").fancybox().trigger('click');
Cookies.set('brochure_modal_cookie', 'value', { expires: 7 });
}

Avoid popup on refresh. show only when user close browser window

I want to show popup only when user close the browser window. But, In the following code. It showing popup when I refresh the page.
My Code
<script type="text/javascript">
$(document).ready(function()
{
var key = true;
$(window).bind('beforeunload', function(e){
if(key)
return confirm("Do you really want to close? This will log you out of your profile.");
e.preventDefault()
});
$(document).on("click","a",function() {
key=false;
});
});
</script>

This is essentially what you need.
Source: open a custom popup on browser window/tab close
JSFiddle: http://jsfiddle.net/SQAmG/5/
var popit = true;
window.onbeforeunload = function() {
if(popit == true) {
popit = false;
return "Are you sure you want to leave?";
}
}
EDIT
Use HTML5 Web Storage to simulate sessions within the browser. Here you would want to use sessionStorage rather than localStorage so the session ends when the browser window is completely closed.
If the sessionStorage variable is set, do not start the popup, otherwise allow the popup code to execute.
HTML5 Web Storage: http://www.w3schools.com/html/html5_webstorage.asp

If you set onbeforeunload callback, it will be executed every time whether you close the tab or refresh the page. So, lets get into some hack here. When we close the tab, the window loses its focus. So Inside onbeforeunload we will just check if the window has focus. If it has, you are refreshing the page. If it has lost focus, probably you have closed the tab.
window.onbeforeunload=function(){
if(!document.hasfocus()){
//show popup
}
}

Detect new tab closing from parent(opener)

I have read a bunch of posts but none of them seem to answer the question that i have exactly.
Is it possible to detect a tab closing that was opened by a target="_blank" attr?
I need a new tab/window to open, the user will select an option, then the tab closes.
When that tab closes i need the original window(parent or opener) to refresh.
Any ideas?
EDIT:
further explaination
i have an application that opens another application in an iframe. the application opening in the iframe connects to social media for posting a share. the new tab that opens is used for authentication/oauth dance. the page that is open in the main window shows the accounts that are connected and allows you to connect new accounts(in the main window in the iframe). the authentication/oauth opens a new window/tab to do the dance, then it closes itself. i need the parent window(main window with iframe in it) to know that the new tab/window closed so it can refresh the content and reflect the new connect.
FINAL NOTE
I use many authentication methods, so really the above is irrelavant.
I just need to find out a way to monitor the new tab/window that has opened or even have the new window/tab fire a browser event onunload to that the parent/main window knows it closing so it can refresh.

So if anyone is interested, this is how I have it working for now until I find a better solution.
First what I did was had javascript open my window by assigning it to a variable so it had a reference name.
var checkWindow = false;
var fbAuthWindow;
function openFBAuth(url) {
fbAuthWindow=window.open(url);
checkWindow = true;
setTimeout(function() { checkAuthWindow('fb'); }, 1000);
}
That also sets a timeout to run every second while checkWindow == true to check if the window is closed.
If the window is closed (my script closes the window when authentication is complete), then the page reloads ultimately setting checkWindow back to false.
function checkAuthWindow(win){
if(checkWindow == true){
if(win == 'fb'){
if(fbAuthWindow.closed){
window.location.reload();
} else {
setTimeout(function() { checkAuthWindow('fb'); }, 1000);
}
}
}
}
It isn't the prettiest or by any means a best practice to have the checking the window every second, but for now it will work until i find a better solution.

Here is the working example (http://jsfiddle.net/sureshpattu/w8x7dqxr/) and code
Html
<button class="openPopActBtn">Open pop window </button>
Javascript
var checkWindow = false;
var fbAuthWindow;
$('.openPopActBtn').click(function() {
openFBAuth('www.google.com');
});
function openFBAuth(url) {
fbAuthWindow = window.open(url);
checkWindow = true;
setTimeout(function() {
checkAuthWindow('fb');
}, 1000);
}
function checkAuthWindow(win) {
if (checkWindow == true) {
if (win == 'fb') {
if (fbAuthWindow.closed) {
window.location.reload();
} else {
setTimeout(function() {
checkAuthWindow('fb');
}, 1000);
}
}
}
}

How can I close all notifications of a page before unload it (without use Window#onunload)?

I have a page that notifies the user about server updates, using window.webkitNotifications.
It's not a Google Chrome extension.
I want to close all page notifications before the page unload.
I'm trying to do it with:
var notifications = new Array();
// ...
var popup = window.webkitNotifications.createNotification(...);
// ...
notifications.push(popup);
// ...
function closeAll(){
for (notification in notifications) {
notifications[notification].cancel();
}
}
//...
$(window).unload(function() {
closeAll();
});
But the notifications are not closed when I reloads the page.
I found this issue on Chromium project: https://code.google.com/p/chromium/issues/detail?id=40262
How can I ensure that page notifications are closed without use the Window#onunload ?

I wonder if you can add some javascript to the notification popup and settimeout withing the actual popup, that way it will close eventually.
I will have to try and test this out.

Use this :)
$(window).on('beforeunload', function() {
closeAll();
});

Use the beforeunload event instead of unload.