Capturing Popup Window Close Events in JavaScript: Cross-Origin Solutions

Introduction

Popup windows are common components in modern web development, but capturing their close events presents significant challenges, especially in cross-origin scenarios. This article systematically examines technical solutions to this problem.

Standard Solution for Same-Origin Windows

When the popup window shares the same domain as the parent page, the onbeforeunload event listener can be used directly. Here's the standard implementation:

var new_window = window.open('some url');
new_window.onbeforeunload = function() {
    // Perform cleanup or data saving operations
    console.log('Popup window is about to close');
};

Note that the event name must be in all lowercase onbeforeunload, as required by browser API standards. This method is straightforward but only works for same-origin scenarios.

Cross-Origin Challenges and Solutions

Due to browser same-origin policy restrictions, direct access to the onbeforeunload event is unavailable when the popup points to a different domain. In such cases, polling detection techniques are required.

Polling Detection Implementation

By periodically checking the popup window's closed property, window closure can be indirectly detected:

var win = window.open('http://www.example.com');
var timer = setInterval(function() {
    if (win.closed) {
        clearInterval(timer);
        // Execute post-closure callback
        handlePopupClosed();
    }
}, 1000);

The core of this approach is the win.closed property, which remains accessible in cross-origin contexts and returns a boolean indicating whether the window has closed.

Performance Optimization Considerations

Polling intervals require balancing responsiveness and performance:

• Shorter intervals (e.g., 100ms) detect closures faster but increase CPU load
• Longer intervals (e.g., 1000ms) are more energy-efficient but have higher response latency
• 500-1000ms is generally recommended, adjustable based on specific application needs

Real-World Application Analysis

Many major web applications employ this polling technique. The Facebook JavaScript SDK, for instance, contains similar implementations:

// Relevant code snippet from Facebook SDK
function checkPopupClosed(popup) {
    var interval = setInterval(function() {
        if (popup.closed) {
            clearInterval(interval);
            // Handle OAuth callbacks and other logic
        }
    }, 500);
}

This method's reliability has been proven in production environments, particularly in critical scenarios like OAuth authorization flows.

Technical Comparison and Selection Guidelines

Best Practices

1. First check for same-origin conditions to select the most appropriate method
2. Implement graceful degradation to ensure functionality across different environments
3. Include proper timeout mechanisms in polling to prevent memory leaks
4. Consider requestAnimationFrame for performance-sensitive scenarios

Conclusion

Detecting popup window close events requires selecting appropriate technical solutions based on specific contexts. Standard event listeners are recommended for same-origin cases, while validated polling techniques serve well for cross-origin scenarios. Although future web standards may offer more elegant solutions, current methods reliably meet most application requirements.