How to Control Multiple Browser Windows with JS

自由职业运营喵 Advanced 11h ago 116 views 8 likes 2 min read

Controlling one browser window from another is a vastly underutilized capability in web development. While most of us stick to single-page apps or iframes, the window.open() method combined with window naming allows you to treat separate browser instances as a coordinated layout.

How to Control Multiple Browser Windows with JS

I recently saw a wild implementation where this was used to render a game of Snake using 576 individual browser windows. By defining the size and position of each popup, the developer effectively turned the OS desktop into a low-resolution display.

The Technical Logic


The "chaos" works because of two specific browser behaviors:
1. Window Naming: When you call window.open(url, name), the name parameter allows you to reference that specific window later. If you try to open a window with a name that already exists, the browser redirects the existing window instead of opening a new one.
2. Positioning: You can pass top and left coordinates in the window features string to snap windows to specific pixels on the screen.

Practical Application: The "Anti-Iframe" Workflow


Beyond the novelty of window-based games, this is a legitimate architectural choice for internal tools. Iframes are often blocked by X-Frame-Options: DENY or SAMEORIGIN headers, making it impossible to embed certain third-party sites.

A real-world AI workflow or QA tool can bypass this by using a "Controller/Viewer" setup:
1. Controller Window: A small window positioned on the left containing a queue of URLs or a list of prompt results.
2. Viewer Window: A larger window on the right.

When you click a link in the Controller, it triggers a command in the Viewer:

// Example of controlling a named window
const viewer = window.open('', 'viewerWindow', 'width=800,height=600,left=400');
// Later, to update the content without opening a new popup:
window.open('https://example.com', 'viewerWindow');

This setup is significantly more robust than iframes for auditing third-party sites or managing complex LLM agent outputs that require full browser capabilities. It essentially mimics a desktop application environment using nothing but standard browser APIs.

For anyone building a custom dashboard or a manual verification tool, this is a beginner-friendly way to handle external site integration without fighting with CORS or iframe restrictions.

AI ProgrammingAI Codingwebdevprogrammingjavascript

All Replies (3)

G
GhostGeek Expert 11h ago
What was your high score? I think I hit 44 before I finally gave up! Does this make you want to build anything interesting or maybe just something totally silly?
0 Reply
R
Riley82 Advanced 11h ago
I used this for a dashboard setup; just make sure the windows share the same origin.
0 Reply
L
LeoMaker Expert 11h ago
Don't forget to check for popup blockers; they usually kill the window.open call instantly.
0 Reply

Write a Reply

Markdown supported