How to know a window closed using javascript from another window/tab? - javascript

I have a window example.com/welcome.php.
Using window.open(abcd.php,"mywindow","...") I open abcd.php in new window.
By using window.close() from abcd.php. I close abcd.php. How can I trigger some action in welcome.php when abcd.php closed,

You can use onunload event attached to the opened window;
var w = open('stackoverflow.com');
w.onunload = (ev) => {
console.log('unload', ev);
};
//w.close();
Update
Set unload even inside load event to prevent from unnecessary firing unload on window open, witch happen to me in chrome at least.
var w = open('https://stackoverflow.com/users/8424614/unnamedxaer');
w.onload = () => {
w.onunload = (ev) => {
console.log('unload', ev);
};
};
Update 2
The urls have to be in the same domain to work, otherwise you will get an error when trying to attach event to opened window (w) (set debugger in the line with onunload), they also must be served from same kind of server - not accessed like files when the url in browser looks like this c:/my-site/welcome.php.
Here is working example. Open CodeSandbox's console located at the bottom of the window below the browser section to see output.

Related

Need to run some code before closing of a popup window in chrome

I am opening a popup chrome window.
let popup = window.open(redirectUrl, '_blank');
I want to take the variable set in the localstorage in that window, before it closes. I have written code as
popup.onbeforeunload = (e) => {
console.log(popup.localStorage.abc);
}
But this line is not getting executed. I debugged,Debugger is not even going inside the method. Please help me in what I am doing wrong or is there any other way?

Why does my popup window lose its event beforeunload after a reload?

I have a small application that opens a new popup. I store the window in a variable:
popup = window.open("sites/display.html", "_blank");
After that I add a beforeunload Eventlistener:
$(popup).on('beforeunload', function(){
// Do something
});
I then later reload the window with a button:
popup.location = popup.location;
After that if I close the window the Event beforeunload isn't fired anymore. I think it has something to do with the reload because if I dont reload the page everything works fine.
How can I fix this so the event is fired everytime the window closes?
Exact code I use:
function startClock(allowRestart) {
saveSettings(allowRestart);
if ($("#separated-display").is(":checked")) {
// Separated mode activated
if (popup == undefined) {
openPopup();
} else {
if (popup.closed) {
openPopup();
}else{
popup.location.reload();
}
}
} else {
// Separated mode deactivated
if (popup != null && popup.closed == false) {
$(popup).unbind();
popup.close();
}
window.location = "sites/display.html"; // Open the clock in same window
}
}
function openPopup(){
// Open new popup window
popup = window.open("sites/display.html", "_blank");
// TO-DO: Fix event not fired after 1. window reload 2. window close
popup.addEventListener('beforeunload', function(){
console.log("unload");
});
}
As you're trying to access the same origin (with the relative path) window using window.open(), Access error shouldn't be displayed.
popup = window.open("/sites/display.html", "_blank")
popup variable would refer to the newly created window which is a thin wrapper representing a WindowProxy object, which indeed has all features of window available.
When the page reloads everything is set to default, and the window loses its properties set before. Therefore, the unload event attached earlier is not anymore attached. This would happen for other events as well.
Hence the problem here that the event is being attached to the popup window just once on opening the popup, which is reset on page reload. The best way to go forward would be to add the unload event in the js file which loads specifically on sites/display.html page. There, every time when sites/display.html page loads you could access the new window object and attach events in window.load / document.ready (according to your use case).
You won't able to attach the event to pop up before or after invoking page reload as you're doing it currently as, the property would be reset if you try setting it before/after page reload as it might be executed asynchronously.
NOTE:
You should rather use the reload() function exposed by window.location instead of updating the location property. As updating the property doesn't skip browser cache.
popup.location.reload()
The support for window.open is unknown for most browsers, though I was able to use it on Chrome 84.

Lost reference created window after surfing

I have creating a new browser window win by #new-window-idclick. And I have events system with that window. Closing win.closed for example. Everything is work until I go to links inside the created window.
$('#new-window-id').on('click', function(){
var finalUrl = $(this).attr('href');
var win = window.open(
finalUrl,
'fullWindowMode');
console.log('created '+ win.name);
var timer = setInterval(function() {
if(win.closed) {
console.log('closed '+ finalUrl);
clearInterval(timer);
document.getElementById('#iframeID').contentWindow.location.reload();
}
}, 1000);
});
So I have iframe on main page. I want to open it in a new window and edit a content there. Then after closing created window, my main page iframe should be updated.
Steps:
Click the link #new-window-id/ //window is opened.
Close window. win.closed is work!
When doesn't work
Steps:
Click the link #new-window-id/ //window is opened.
In the window edit blog post. (url was changed)
Close window. event win.closed doesn't work!
But it breaks if I surfing inside created window. Exists way to keep this connection?
I did the following:
1. Created a window let w = window.open('http://ya.ru')
2. Navigated in that window (within the same site)
3. Checked w.closed in the main window (false)
4. Then closed the popup and checked again (true).
Looks like w.closed works even after navigation.
But if you navigate to another origin in the new window, then location.reload() will become inaccessible from the main window.

How do I close the current browser tab on ReactJS?

Basically, I want the current browser tab to be closed on a click of a button. How do I implement this in ReactJS? Tried window.close() but did not work.
For security purposes, JavaScript can't close a window that it didn't directly open.
https://developer.mozilla.org/en-US/docs/Web/API/Window/close
As you can see from the example, the originating script (which opened the window) must also be the script that closes the window. A new window isn't capable of closing itself via JavaScript.
//Global var to store a reference to the opened window
var openedWindow;
function openWindow() {
openedWindow = window.open('moreinfo.htm');
}
function closeOpenedWindow() {
openedWindow.close();
}
On your click event handler, try this :
window.open("", "_self");
window.close();

How to close all children windows in browser on unload of parent window with javascript

I need to find and close all children windows (whose that this page is their window.opener) on unload of the page with javascript. When parent window is about to be unloaded I need to run through all opened windows and close only those that the unloaded page is their window.opener. What is the correct way to do so ? I need a cross-browser solution .
Create a variable for every new window you need to open, then close them like this:
var.close();
Full example:
var window1;
window1 = window.open("www.google.com");
window1.close();
Try making use of onunload event which is responsible for closing all the pop-ups.
<body onunload="destroyPopUps()">
In the code above the onunload event is tied to the body element of the page. Here is the implementation of the destroyPopUps function.
function destroyPopUps()
{
if(popups.length == 0) return;
for(i=0; i<popups.length; i++)
{
popups[i].close();
}
}

Categories