window.open('', 'test'); open a new "about:blank" window, instead of focus existing "test" window

I have a web application that open multiple external popup window eg.:

window.open('https://stackoverflow.com/', 'stackoverflow')

The end user, can open multiple window of my application and I want that only one window for target exists. The solution I have adopted is a BroadcastChannel for share beetween my application instances the information if a target window is already opened.

broadcastChannel.postMessage({ type: 'open', value: 'stackoverflow'});
window.open('https://stackoverflow.com/', 'stackoverflow');

all application instances listen for the message and collect opened target windows

 const openWindowsTarget = [];
 broadcastChannel.onmessage = (event) => {
    if( event.data.type === 'open' ){
        openWindowsTarget.push(event.data.value);
    }
 }

In this way if a target window is opened somewhere, the window is opened without url, just with the target

 if (openWindowsTarget.includes('stackoverflow') ) {
    window.open('', 'stackoverflow');
 }

the window in this way is just focused without reload.

This behavior works in the past, but in the present day the effect is a new "about:blank" window is opened. Probably something is changed in the browser side.

I'm finding a solution for fix then!

For test/help save this snippet into an html file (example.html), open into two separate window and click on the button

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <button onclick="openWindow('https://stackoverflow.com/', 'stackoverflow')">
      Open stackoverflow
    </button>
    <script>
      const broadcastChannel = new BroadcastChannel('WindowService');
      const openWindowsTarget = [];

      broadcastChannel.onmessage = (event) => {
        if (event.data.type === 'open') {
          openWindowsTarget.push(event.data.value);
          console.log({openWindowsTarget})
        }
      };

      function openWindow(url, target) {
        if (openWindowsTarget.includes(target)) {
          window.open('', target);
        } else {
          broadcastChannel.postMessage({ type: 'open', value: target });
          openWindowsTarget.push(target);
          window.open(url, target);
        }
      }
    </script>
  </body>
</html>

I have also tried to change approach and send a broadcast message for focus the window, but the focus() has no effect, if the window is minimized, it remain minimized

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <button onclick="openWindow('https://stackoverflow.com/', 'stackoverflow')">
      Open stackoverflow
    </button>
    <script>
      const broadcastChannel = new BroadcastChannel('WindowService');
      const openWindowsTarget = [];
      const localWindows = {};

      broadcastChannel.onmessage = (event) => {
        if (event.data.type === 'open') {
          openWindowsTarget.push(event.data.value);
          console.log({openWindowsTarget})
        }
        if (event.data.type === 'focus') {
            if( localWindows[event.data.value] ){
                localWindows[event.data.value].focus();
            }
        }
      };

      function openWindow(url, target) {
        if (openWindowsTarget.includes(target)) {
          broadcastChannel.postMessage({ type: 'focus', value: target });
        } else {
          broadcastChannel.postMessage({ type: 'open', value: target });
          openWindowsTarget.push(target);
          localWindows[target] = window.open(url, target);
        }
      }
    </script>
  </body>
</html>

Other ideas?

Answer

Perhaps a solution that checks the existence of a window would be suitable. Although your original script did not cause any problems for me.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  
<script>
let windowObjectReference = null; // global variable
function openWindow(url, windowName) {
  if (windowObjectReference === null || windowObjectReference.closed) {
    windowObjectReference = window.open(url, windowName);
  } else {
    windowObjectReference.focus();
  }
}
</script>

  <body>
    <button onclick="openWindow('https://stackoverflow.com/', 'stackoverflow')">
      Open or create a window named `stackoverflow`
    </button> 
  </body>
  
</html>