Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Window opener Property
The HTML DOM Window opener property returns a reference to the parent window that opened the current window using the window.open() method. This property allows communication between parent and child windows, enabling the child window to access and manipulate elements in its parent window.
Syntax
Following is the syntax for accessing the opener property −
window.opener
Return Value
The opener property returns −
A reference to the parent window object if the current window was opened by another window using
window.open().null if the window was opened directly by the user (typed URL, bookmark, etc.) or if the opener reference was explicitly set to null.
How It Works
When a window opens another window using window.open(), the new child window automatically gets a reference to its parent through the opener property. This enables two-way communication between windows, where the child can call functions or modify content in the parent window.
Basic Example
Following example demonstrates basic usage of the opener property −
<!DOCTYPE html>
<html>
<head>
<title>Window Opener Basic Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Parent Window</h2>
<button onclick="openChild()">Open Child Window</button>
<p id="status">No child window opened</p>
<script>
let childWindow;
function openChild() {
childWindow = window.open("", "child", "width=400,height=300");
childWindow.document.write(`
<html>
<head><title>Child Window</title></head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Child Window</h2>
<button onclick="updateParent()">Update Parent</button>
<script>
function updateParent() {
if (window.opener) {
window.opener.document.getElementById("status").textContent = "Updated from child window!";
}
}
</script>
</body>
</html>
`);
document.getElementById("status").textContent = "Child window opened";
}
</script>
</body>
</html>
Advanced Example with URL Navigation
Following example shows a more advanced implementation with URL navigation and window management −
<!DOCTYPE html>
<html>
<head>
<title>Window Opener Advanced Example</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.container { max-width: 600px; margin: 0 auto; text-align: center; }
input[type="url"] { width: 300px; padding: 8px; margin: 10px; }
button { padding: 8px 16px; margin: 5px; border-radius: 4px; border: 1px solid #ddd; cursor: pointer; }
.status { margin: 20px 0; padding: 10px; background: #f0f0f0; border-radius: 4px; }
</style>
</head>
<body>
<div class="container">
<h2>Window Opener Demo</h2>
<input type="url" id="urlInput" placeholder="Enter URL (e.g., https://www.google.com)" value="https://www.google.com"><br>
<button onclick="openWindow()">Open Window</button>
<button onclick="closeWindow()">Close Window</button>
<button onclick="focusWindow()">Focus Window</button>
<div class="status" id="status">Ready to open window</div>
</div>
<script>
let childWindow = null;
function openWindow() {
const url = document.getElementById("urlInput").value || "https://www.google.com";
if (childWindow && !childWindow.closed) {
childWindow.focus();
updateStatus("Window already open - brought to front");
return;
}
childWindow = window.open(url, "browserWindow", "width=800,height=600,scrollbars=yes,resizable=yes");
if (childWindow) {
updateStatus("Child window opened successfully");
// Check if window is closed periodically
const checkClosed = setInterval(() => {
if (childWindow.closed) {
updateStatus("Child window was closed by user");
clearInterval(checkClosed);
}
}, 1000);
} else {
updateStatus("Failed to open window (popup blocked?)");
}
}
function closeWindow() {
if (childWindow && !childWindow.closed) {
childWindow.close();
updateStatus("Child window closed programmatically");
} else {
updateStatus("No window to close");
}
}
function focusWindow() {
if (childWindow && !childWindow.closed) {
childWindow.focus();
updateStatus("Child window brought to front");
} else {
updateStatus("No window to focus");
}
}
function updateStatus(message) {
document.getElementById("status").textContent = message;
}
</script>
</body>
</html>
Communication Between Windows
The opener property enables bidirectional communication between parent and child windows. The child window can access parent elements, call parent functions, and modify parent content.
Example − Child to Parent Communication
<!DOCTYPE html>
<html>
<head>
<title>Child-Parent Communication</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Parent Window Communication Demo</h2>
<button onclick="openForm()">Open Form Window</button>
<div id="result" style="margin: 20px 0; padding: 10px; background: #f9f9f9;">No data received yet</div>
<script>
function openForm() {
const formWindow = window.open("", "form", "width=400,height=300");
formWindow.document.write(`
<html>
<head><title>Form Window</title></head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Enter Information</h3>
<form onsubmit="sendToParent(event)">
<input type="text" id="name" placeholder="Your Name" required><br><br>
<input type="email" id="email" placeholder="Your Email" required><br><br>
<button type="submit">Send to Parent</button>
</form>
<script>
function sendToParent(event) {
event.preventDefault();
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
if (window.opener) {
const resultDiv = window.opener.document.getElementById("result");
resultDiv.innerHTML = "<strong>Data from child window:</strong><br>Name: " + name + "<br>Email: " + email;
window.close();
}
}
</script>
</body>
</html>
`);
}
</script>
</body>
</html>
Security Considerations
When working with the opener property, consider these security aspects −
Same-origin policy − The opener property only works when both windows are from the same domain. Cross-origin access is blocked for security.
Popup blockers − Modern browsers may block popup windows, so always check if
window.open()returns null.Setting opener to null − You can prevent child windows from accessing the parent by setting
window.opener = nullin the child window.
Example − Checking Opener Availability
<!DOCTYPE html>
<html>
<head>
<title>Opener Availability Check</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Opener Property Check</h2>
<button onclick="checkOpener()">Check Opener</button>
<button onclick="openChild()">Open Child to Test</button>
<div id="openerInfo" style="margin: 20px 0; padding: 10px; background: #f0f8ff;"></div>
<script>
function checkOpener() {
const info = document.getElementById("openerInfo");
if (window.opener) {
info.innerHTML = "<strong>Opener exists:</strong> This window was opened by another window.<br>" +
"Parent URL: " + window.opener.location.href;
} else {
info.innerHTML = "<strong>No opener:</strong> This window was opened directly by the user.";
}
}
function openChild() {
const child = window.open("", "test", "width=400,height=200");
child.document.write(`
<html>
<body style="font-family: Arial, sans-serif; padding: 20px;">
& 
755 Views
