We Keep Coding

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.

Calculate the time spent on the newly opened window from the parent window

I want to calculate the time spend on the opened browser window from the parent window.
the newly opened window is a youtube video or any other external website which we can't do any server-side coding.
function loadvideo(url , id){
var a = window.open(url);
a.onbeforeunload = function() {
a.console.log("hi");
}
}
I want to trigger an event when the window is closed. I tried this. it won't trigger when closing a loaded site.

How to return focus on parent window from a pop window while loading first time

I am working on a website. Where while loading website first time opening index page with one pop window. First my problem is I want to minimize this pop window automatically while loading first time and focus return to website without any click in website.
Here is my code in index page I write this function:
myFunction();
function myFunction() {
//var myWindow = window.open("music.php", "", "width=320,height=60");
var myWindow = window.open("music.php", "", "directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,left=-100000000, top=100000, width=320, height=1, display=none","visibility=hidden");
//myWindow.moveTo(0, 0);
}
And pop window having page extension music.php which should be minimize automatically and focus return to index page without any click on website.
I have already try with set the focus of a popup window to website everytime , but it was also not working.

Well, The window object has an opener property as well.
When we open the browser, that property is null, and when we open a popup , it points to the window the popup has been opened through.
I think something like this should suffice.
myFunction();
function myFunction() {
var myWindow = window.open("music.php", "", "directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,left=-100000000, top=100000, width=320, height=1, display=none","visibility=hidden");
myWindow.opener.focus() // can also do window.focus()
}
The execution of JS should not stop, but if it does, you have to add the focus code to your child page/popup page.(Depending on varying browsers)
like
popupHTMLJS.js
focusParent();
function focusParent(){
parent = window.opener;
parent.focus()
}

Javascript Popup Window as a singleton

I have a page A which opens a javascript window as myWin = window.open(..). Now in another page B in the same domain, when user clicks on a link, I want to check if myWin is available, if yes then bring that window in front, else do a new myWin.
The problem I have is the window.js file in both pages and window.js contains the line
var myWin = null;
Within Page A scope, my logic works and brings window to front. Within Page B it works as well. Howver when I open window in Page A, click on link in Page B, it fails.
It is as if myWin is reset to null in scope of Page B. How can I overcome this problem? Pointers??/

The popup window is created by page A and only page A contains a reference to that window. When you open page B, there is no way to pass page A's reference to the popup over to page B. This cannot be done.

You want to call window.open with an empty url, e.g.
var newWindow = window.open('', title, dimension); // title needs to be a constant
if (newWindow.location.href && newWindow.location.href!='about:blank') {
// Window was already open and points to something
newWindow.focus();
} else {
// new window make it point to something
newWindow.location.href = 'http://yoursite';
}
This assumes that the popup is opening a window within the same site as the calling page, since otherwise you can encounter various permissions issues.

How do i Put the window on top and refresh the back window in JavaScript

So here is the thing happening .I click on submit button it goes to some.php and gets the json value with item2 and we open print.php in a new window .After that the page which generated print.php gets refreshed with a function. Now my problem i want to retain the print.php window on the top and also refresh the back window which generated it .So i went and used window.location = self.location();.Now my print.php stays on top but the page which needs to be refreshed gives me error "object doesnot support this action"
$("#submit-button").click(function(){
$.post("some.php?id="+id1value,function(data){
if(data.item2 !=null){
window.open('print.php?id1='+id1value+'&id2='+ data.item2 );
refreshBack($("#div1").text());
}else{
//Do Process for else
} },'json')
}
)
});
function refreshBack(text){
if(text==="abc"){
url = "one.php";
}
else{
url = 'two.php?id3='+id3value;
}
document.form_name.action=url;
document.form_name.submit();
}

To refresh the owning window that launched a popup, use:
window.opener.location.reload();
To refresh a child window, save the reference made by window.open() and later call the reference's location reload.
var myPopup = window.open('print.php?id1='+id1value+'&id2='+ data.item2 );
...
myPopup.location.reload();
To give a particular window foreground focus, use the .focus() method in either window object.
// Focus the current window
window.focus();
// Focus the child window
myPopup.focus();
// Focus the window that opened the current popup
window.opener.focus();