ZetCode

JavaScript window.open

last modified April 2, 2025

In this article, we explore the window.open method in JavaScript. This method allows developers to open new browser windows or tabs programmatically. It's commonly used for popups, external links, and multi-window applications.

Basic Definition

The window.open method creates a new browser window or tab. It takes three parameters: URL, window name, and window features. The URL specifies the page to load, while the name can target specific windows.

Window features control the appearance of the new window. These include size, toolbars, and scrollbars. Modern browsers often restrict popup windows due to user experience concerns and security reasons.

Basic window.open

This example demonstrates the simplest way to open a new browser window.

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Basic window.open</title>
</head>
<body>

<button onclick="openWindow()">Open Window</button>

<script>
    function openWindow() {
        window.open('https://www.example.com');
    }
</script>

</body>
</html>

This code creates a button that opens example.com in a new tab when clicked. The window.open method is called with just the URL parameter. Most modern browsers will open this in a new tab rather than a popup window.

The behavior depends on browser settings and user preferences. Some browsers may block popups by default, requiring user permission. This is a basic example without any window customization.

Opening with Window Features

This example shows how to customize the new window's appearance and behavior.

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Window with Features</title>
</head>
<body>

<button onclick="openCustomWindow()">Open Custom Window</button>

<script>
    function openCustomWindow() {
        const features = 'width=600,height=400,menubar=no,toolbar=no';
        window.open('about:blank', 'myWindow', features);
    }
</script>

</body>
</html>

Here we specify window dimensions (600x400 pixels) and disable the menu and toolbars. The second parameter names the window 'myWindow', which can be used for targeting. The URL 'about:blank' opens an empty page.

Window features are specified as a comma-separated string. Common features include width, height, scrollbars, and resizable. Note that many features are ignored in modern browsers due to security restrictions.

Controlling the Opened Window

This example demonstrates how to interact with the newly opened window.

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Controlling Window</title>
</head>
<body>

<button onclick="openAndControl()">Open and Control</button>

<script>
    function openAndControl() {
        const newWindow = window.open('', 'myWindow', 'width=400,height=300');
        
        newWindow.document.write('<h1>Hello from parent!</h1>');
        newWindow.document.close();
        
        setTimeout(() => {
            newWindow.close();
        }, 3000);
    }
</script>

</body>
</html>

This code opens a window, writes content to it, then closes it after 3 seconds. The window.open returns a reference to the new window object. This reference allows manipulation of the new window.

We use document.write to add content and close to programmatically close the window. Note that many browsers restrict cross-origin window control for security reasons.

Opening with Target

This example shows how to use the window name parameter for targeting.

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Window Targeting</title>
</head>
<body>

<button onclick="openInSameWindow()">Open in Same Window</button>
<button onclick="openInNewWindow()">Open in New Window</button>

<script>
    function openInSameWindow() {
        window.open('page1.html', 'myTargetWindow');
    }
    
    function openInNewWindow() {
        window.open('page2.html', '_blank');
    }
</script>

</body>
</html>

The first button opens content in a named target window ('myTargetWindow'). Subsequent calls with the same name will reuse that window. The second button uses '_blank' to always open in a new window/tab.

Target names follow the same rules as HTML target attributes. Special values include '_blank', '_self', '_parent', and '_top'. This targeting mechanism is useful for single-page applications.

Popup with Communication

This advanced example demonstrates communication between windows.

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Window Communication</title>
</head>
<body>

<button onclick="openPopup()">Open Popup</button>
<p id="message"></p>

<script>
    let popupWindow;
    
    function openPopup() {
        popupWindow = window.open('', 'popup', 'width=300,height=200');
        popupWindow.document.write(`
            <h2>Child Window</h2>
            <button onclick="window.opener.postMessage('Hello parent!', '*')">
                Send Message
            </button>
        `);
        
        window.addEventListener('message', (event) => {
            document.getElementById('message').textContent = 
                `Received: ${event.data}`;
        });
    }
</script>

</body>
</html>

This creates a parent-child window relationship. The child window can send messages to the parent using postMessage. The parent listens for messages with addEventListener.

The postMessage API is the modern, secure way for windows to communicate. It works across origins when properly configured. Always validate message origins in production code for security.

Source

MDN window.open Documentation

In this article, we have explored the window.open method in JavaScript. This powerful feature enables multi-window applications but should be used judiciously due to browser restrictions and user experience concerns.

Author

My name is Jan Bodnar, and I am a passionate programmer with extensive programming experience. I have been writing programming articles since 2007. To date, I have authored over 1,400 articles and 8 e-books. I possess more than ten years of experience in teaching programming.

List all JS DOM tutorials.