Develop Reference

JavaScript open a tab and track when it is closed

I open a tab from JavaScript and try to track when it is closed. But none of the events is fired. I only find examples with onbeforeunload referencing the current window, not other window-objects.
window.addEventListener('DOMContentLoaded', () => {
document.querySelector('#youtube-open').addEventListener('click', () => {
document.yTT = window.open('https://youtube.com', '_blank');
document.yTT.addEventListener('close', () => {
console.log('onclose fired');
});
document.yTT.addEventListener('beforeunload', () => {
console.log('onbeforeunload fired');
});
document.yTT.addEventListener('unload', () => {
console.log('onunload fired');
});
});
});
There are no errors in the JS console or something. It just doesn't work. Any ideas why?

you can not access the other window instances of a browser. A way to bypass that is to use the local storage(which can be accessed from the events you listed above), to store some cross-tab data and a polling mechanism(in your main tab) to get the states.

Yes it is possible to track when the window is closed just not that way.
Your document.yTT variable holds the WindowProxy object returned by window.open(). That object will not emit the events you are trying to listen to unfortunately. It will however hold a property that says if the window has been closed.
You can do this if you want to call a function when the window is closed :
window.addEventListener('DOMContentLoaded', () => {
document.querySelector('#youtube-open').addEventListener('click', () => {
document.yTT = window.open('https://youtube.com', '_blank');
document.yTTInterval = setInterval(() => {
if (document.yTT.closed) {
clearInterval(document.yTTInterval);
executeSomeFunction();
}
}, 1); // or whatever interval works for you, the longer the less consuming
});
});

Vue.js not detecting window close

I am trying to open a new window and then detect when that window has closed. But so far nothing I have tried is working. I have the following:
methods: {
submitForm: function(e) {
var newWindow = window.open('https://www.google.com', '_blank')
newWindow.onblur = this.windowClosing
}
windowClosing: function () {
console.log('tab closing')
}
}
The tab/window opens and what I would like to see is the "tab closing" in the parent window. I assume it might be writing it to the newWindow and then that is lost? I've also tried
window.addEventListener('xx')
Thank you

Electron: Close w X vs right click dock and quit

In my Electron app, I would like to do something that is done very often in other OSX apps. That is... I would like to NOT close the app of the red X is clicked in the top right. But, if they right click the app icon in the dock, and say Quit, then I would like to quit the app. How do I do this?
I have tried using the onbeforeunload event from the rendererProcess, as well as the browserWindow.on("close", fn) event to try and prevent this. The problem is that they both file the onbeforeunload event. And I can't tell the different between the red X being clicked and the dock icon being right clicked and told to quit. Any help would be nice. Has anyone else done this in Electron for OSX?

try this
if (process.platform === 'darwin') {
var forceQuit = false;
app.on('before-quit', function() {
forceQuit = true;
});
mainWindow.on('close', function(event) {
if (!forceQuit) {
event.preventDefault();
/*
* your process here
*/
}
});
}

This is the only answer that worked for me:
const electron = require('electron');
const app = electron.app;
let willQuitApp = false;
let window;
app.on('ready', () => {
window = new electron.BrowserWindow();
window.on('close', (e) => {
if (willQuitApp) {
/* the user tried to quit the app */
window = null;
} else {
/* the user only tried to close the window */
e.preventDefault();
window.hide();
}
});
window.loadURL('foobar'); /* load your page */
});
/* 'activate' is emitted when the user clicks the Dock icon (OS X) */
app.on('activate', () => window.show());
/* 'before-quit' is emitted when Electron receives
* the signal to exit and wants to start closing windows */
app.on('before-quit', () => willQuitApp = true);
via https://discuss.atom.io/t/how-to-catch-the-event-of-clicking-the-app-windows-close-button-in-electron-app/21425/8

After much looking, I found the following solution. When you right click on the dock and select Quit, before that fires the onbeforeunload in the rendererProcess, it will first fire the close event on the app itself. So, in the rendererProcess you have an onbeforeunload listener. And you tell that to return false always. Returning false from that event will prevent the window from unloading/closing ever. Then in your mainProcess you add app.on('close',fn) listener. That listener can send an event to the rendererProcess telling it to allow the close. Perhaps you can set a global allowClose = true or something. Then in your onbeforeunload, you add the logic to not return true if allowClose is true.

Take a look at the window-all-closed event of app in the main process. This event is typically used to quit the app on Linux and Windows but not on OS X (for an example, see Electron's Quick Start Tutorial). On OS X you should then probably also handle the activate event to open a new window if there is currently no window open.

Have a look at the electron quick start guide
Please notice the two below solutions needs to be implemented in main.js, and not on the JS executed on your html page.
Specific window close
If you want to execute code when a specific BrowserWindow is closed:
mainWindow.on('closed', function() {
// Your code to be executed before "really" stopping the app
});
All window close
If you want execute code when ALL the windows are closed (app API):
app.on('window-all-closed', function() {
// do stuff here
});

You need to handle this from your main.js file, by checking if it's a darwin platform, on window-all-closed event and re-create the window on activate event.
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow();
}
});
More info/Example: https://github.com/atom/electron-quick-start/blob/master/main.js

This is how i solved it and this works perfectly.
import { app } from "electron";
let window: any;
let forceQuit = false;
app.on("ready", () => {
window = //YOUR BROWSER WINDOW
window.on("close", e => {
if (process.platform === "darwin" && forceQuit) {
window = null;
} else {
e.preventDefault();
app.hide();
}
});
app.on("activate", function() {
app.show();
});
app.on("before-quit", function(event) {
if (!forceQuit) {
event.preventDefault();
forceQuit = true;
app.quit();
}
});

Javascript detect popup window close

I have this code in my popup window (which is opened by parent window):
window.onbeforeunload = closeWindow;
function closeWindow(){
}
The problem is that this code fires when parent window is being refreshed. Is there a way for this code only to fire when popup window is actually being closed?

Hmmm. You could try something like this in the window that opens the popup.
var NewWin = window.open("NewWin", "example.htm", "width=100;height=300;");
// modify styling as necessary etc.
NewWin.onbeforeunload = function() {
window.setTimeout(function() {
if (!NewWin) {
// window has been closed
} else {
// false alarm, just a refresh
}
}, 1000);
}
EDIT: To prevent the window from reopening on parent page refresh, use a similar technique from within the popup
window.opener.onload = function() {
window.opener.NewWin = self;
}
Then change the first line of the code above to:
document.onload = function() {
if (!NewWin) { var NewWin = window.open("NewWin", "example.htm", "width=100;height=300;"); }
}

Windows.open - how do I handle when it's being closed?

By calling window.open I'm opening a new window with external website from my Sinatra application:
%a{:href=>"some_external_website.com", :target=>"blank", :onclick=>"popupWin = window.open(this.href, 'test', 'location,width=600,height=500,top=0'); popupWin.focus(); return false; window.open('')"}
I want to handle a moment when an user is closing a window. How can I do it? Of course, in javascript.

Add an onunload handler to the window. Using your current approach:
var popupWin = window.open(this.href, 'test', 'location,width=600,height=500,top=0');
popupWin.focus();
// add an onunload handler
popupWin.onunload = function () { ... };
return false;
window.open('') // this is dead code, unconditional return above...