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.

Storage event not triggering on iphone browsers(chrome and safari) until tab is focused

Using ReactJS. creating 2 components to explain the issue.
Sample code:
chrome browser window 1: https://localhost:5000/home
componentDidMount(){
function callme(){
if (event.key == "1000") {
console.log("triggerred from another window");
}
}
window.addEventListener("storage", callme, false);
}
chrome browser window 2: https://localhost:5000/pay
componentDidMount(){
localStorage.setItem("1000","hello");
localStorage.removeItem("1000");
}
problem statement:
1) open chrome browser on iPhone and open first URL(https://localhost:5000/home)
2) open a new window and open second URL(https://localhost:5000/pay)
when the second URL componentDidMount() will update localStorage and storage event on the first window should trigger, which is working in all the browsers on desktop but on mobile browsers.
It only triggers if I focus the window 1 then only the storage event is triggering. Whereas I want the storage event to trigger without focusing the second window.
According to MSDN, storage event always triggers whenever there is an update to the localStorage(same origin)
note: This problem will happen on mobile browsers only.

Alert user to navigate less in browser window

I am creating an online exam platform, so I don't want the user to navigate and close the browser. I have used an onblur event and visibility api. Both have limitations.
For example, onblur triggers even when the window is open and the user clicks on empty space in toolbar of the computer. The visibility api only works if the browser window is minimized. It's not applicable if it is overlapped by another window.
$(window).blur(function() {
document.addEventListener("visibilitychange", function() {
if (document.hidden) {
alert('blur');
} else {
console.log("Browser tab is visible")
}
});
})

Reference to parent window after allow popup window once

So I'm trying to test whenever popup windows are enabled for my site. My window should be blocked by browser's popup blocker, unless they are already allowed. If popup windows are allowed everything works fine, since I can test whenever the window was opened directly in my parent page.
Problem is that I still want to mark the test as sucessfull if the user allows to open popup window later by allowing the popup window to open. Only way for me to do that is by calling some function on my parent page, but window opened this way has null window.opener and I can't set the object on child window directly from my parent window since I don't know when will it open.
Is there any way to get reference to my parent window from child window when it's opened this way?
Or any other workaround that could call function on my parent window whenever the child window is sucessfully opened?
Maybe event event that I could hook up to whenever such window is opened, but I couldn't find any such event.
Sample code:
function () {
var myWin = window.open('popupWin.html', '_blank', 'resizable=no,scrollbars=no,height=1,width=1', true);
if (!myWin || myWin == null || typeof (myWin) == 'undefined')
SetPopupResult(false);
else {
SetPopupResult(true);
myWin.close();
}
}
popupWin.html is empty page with following script:
<script>
window.opener.SetPopupResult(true); //throws Cannot read property 'SetPopupResult' of null
setTimeout(function () {
window.close();
}, 1000);
</script>
Edit: Forgot to mention this is issue in Google-Chrome so far, firefox doesn't seem to have this problem and window.opener is correct, IE's behaivor is different as it refreshes the page and openes the popup window like they were enabled.

Invoke js function on click browser tab

How to invoking js function on click browser tab?
I am looking this solution for invoking user when session gets expire.
Not getting any Solution. Please Help.

If you want to detect, that the browser tab with your page was clicked, when user was on aother tab, then you can use window.onfocus
window.onfocus = function() { alert('Browser tab clicked'); };