New Window Opens on the Primary Screen Instead of the Extended Screen

Question

const primaryScreenWidth = 1680; // Primary screen width
    const extendedScreenWidth = 2560; // Assume extended screen width (adjust accordingly)
    const windowWidth = 800;
    const windowHeight = 600;

    // Open the window on the extended screen
    const newWindow = window.open(
      '',
      '_blank',
      width=${windowWidth},height=${windowHeight},left=${extendedScreenWidth},top=100
    );

    if (newWindow) {
      setTimeout(() => {
        // Move the window to the extended screen (assume extended screen is on the right)
        newWindow.moveTo(extendedScreenWidth + 100, 100); // Adjust if needed
        newWindow.resizeTo(windowWidth, windowHeight);
        console.log("Window moved to extended screen");
      }, 500);
    } else {
      console.error("Failed to open new window");
    }

my screen size = 1680;

The popup window opens on the primary screen instead of the extended screen. However, if moved manually, it displays correctly on the extended screen.

Additionally, how can I detect an extended screen in Angular?

Tuhin Paul · Answer

Approach 2: Use window.open and Check Position You can attempt to open a window at a specific position and check if it moves to the expected location. This is less reliable but can serve as a fallback. detectExtendedScreenUsingWindow() { const primaryScreenWidth = 1680; const testWindow = window.open('' '_blank' 'width=100height=100left=2000top=100'); setTimeout(() => { if (testWindow) { const screenLeft = testWindow.screenX || testWindow.screenLeft; if (screenLeft > primaryScreenWidth) { this.hasExtendedScreen = true; console.log('Extended screen detected'); } else { this.hasExtendedScreen = false; console.log('No extended screen detected'); } testWindow.close(); } } 500); } Open a small test window at a position beyond the primary screen. Check the screenX or screenLeft property to determine if the window opened on the extended screen. 3. Combining Both Solutions You can combine the detection logic with the window-opening logic to ensure the new window opens on the extended screen only if one is detected. openWindowOnExtendedScreen() { const primaryScreenWidth = 1680; const extendedScreenWidth = 2560; const windowWidth = 800; const windowHeight = 600; this.detectExtendedScreen().then((hasExtendedScreen) => { if (hasExtendedScreen) { const newWindow = window.open( '' '_blank' `width=${windowWidth}height=${windowHeight}left=${primaryScreenWidth + 100}top=100` ); if (newWindow) { setTimeout(() => { newWindow.moveTo(primaryScreenWidth + 100 100); newWindow.resizeTo(windowWidth windowHeight); console.log(Window moved to extended screen); } 500); } else { console.error(Failed to open new window); } } else { console.log(No extended screen detected. Opening on primary screen.); window.open('' '_blank' `width=${windowWidth}height=${windowHeight}left=100top=100`); } }); } detectExtendedScreen(): Promise { return new Promise((resolve) => { const primaryScreenWidth = 1680; const totalScreenWidth = window.screen.width; if (totalScreenWidth > primaryScreenWidth) { resolve(true); } else { resolve(false); } }); } These solutions assume the extended screen is positioned to the right of the primary screen. Adjust the left value if your setup differs.

Tuhin Paul · Answer

To address the issue of opening a new window on the extended screen and detecting the presence of an extended screen in Angular let's break the problem into two parts: The main issue here is that window.open does not guarantee that the window will open on the extended screen. This behavior depends on the operating system browser settings and how the screens are configured. Solution: Adjusting left Position To check the new window opens on the extended screen you need to calculate the correct left position based on the primary screen's width. Here's the updated code: const primaryScreenWidth = 1680; // Primary screen width const extendedScreenWidth = 2560; // Extended screen width (adjust accordingly) const windowWidth = 800; const windowHeight = 600; // Open the window on the extended screen const newWindow = window.open( '' '_blank' `width=${windowWidth}height=${windowHeight}left=${primaryScreenWidth + 100}top=100` ); if (newWindow) { setTimeout(() => { // Move the window to the extended screen (assume extended screen is on the right) newWindow.moveTo(primaryScreenWidth + 100 100); // Adjust if needed newWindow.resizeTo(windowWidth windowHeight); console.log(Window moved to extended screen); } 500); } else { console.error(Failed to open new window); } The left parameter is set to primaryScreenWidth + 100  which places the window just beyond the edge of the primary screen. The setTimeout ensures the window has time to initialize before moving it. If the extended screen is on the right this approach should work reliably. Detecting an extended screen programmatically can be challenging because JavaScript does not provide direct APIs for querying monitor configurations. However you can infer the presence of an extended screen using the following approaches: Approach 1: Use screen Object The screen object provides information about the user's display(s). You can check the total available width and height to infer the presence of multiple screens. import { Component OnInit } from '@angular/core'; @Component({ selector: 'app-root' template: ` Extended Screen Detected: {{ hasExtendedScreen }} ` }) export class AppComponent implements OnInit { hasExtendedScreen: boolean = false; ngOnInit() { this.detectExtendedScreen(); } detectExtendedScreen() { const primaryScreenWidth = 1680; // Replace with your primary screen width const totalScreenWidth = window.screen.width; const totalScreenHeight = window.screen.height; // Check if the total screen width exceeds the primary screen width if (totalScreenWidth > primaryScreenWidth || totalScreenHeight > window.innerHeight) { this.hasExtendedScreen = true; console.log('Extended screen detected'); } else { this.hasExtendedScreen = false; console.log('No extended screen detected'); } } } window.screen.width and window.screen.height return the total resolution of all connected displays. If the total width or height exceeds the primary screen dimensions it suggests the presence of an extended screen.