如何仅在窗口未打开时调用window.open，已打开则聚焦该窗口？

Hey there! This is a super common use case, and the fix revolves around keeping track of the window reference we get from window.open(). Let’s break this down step by step:

Step 1: Store the window reference in a persistent scope #

First, you need a variable that sticks around between function calls (like global scope or a module-level scope) to hold the reference to the opened window. This lets us check if it’s still active later:

// Declare this outside your function so it doesn't reset every time
let targetWindow;

Step 2: Build a reusable function for open/focus logic #

Write a function that checks the window’s state first. If it’s still open, we focus it; if not, we create a new window and save the reference:

function openOrFocusWindow(url) {
  // Check if the window exists and hasn't been closed by the user
  if (targetWindow && !targetWindow.closed) {
    targetWindow.focus();
  } else {
    // Open a new window and store the reference
    targetWindow = window.open(url, '_blank');
    
    // Optional: Ensure the window gets focus right away (some browsers do this automatically)
    if (targetWindow) {
      targetWindow.focus();
    } else {
      // Handle the case where the browser blocked the popup
      alert('Popup blocked! Please enable popups for this site to continue.');
    }
  }
}

Step 3: Use the function in your UI #

Call this function whenever you need to trigger the open/focus action—like on a button click:

<button onclick="openOrFocusWindow('https://your-target-url.com')">Open or Focus Window</button>

Quick Important Notes: #

• Popup Blockers: Browsers will block window.open() if it’s not triggered by a direct user interaction (like a click). Make sure your function is called directly from a user event handler.
• Scope Matters: If you declare targetWindow inside the function, it’ll reset every time the function runs, so it won’t remember the existing window. Keep it in a scope that persists.
• Window Names: If you replace '_blank' with a specific name (like 'myUniqueWindow'), browsers will reuse that tab if it exists—but managing the reference directly gives you more control over focus behavior.

内容的提问来源于stack exchange，提问作者Ismail Mouh