Passing Data from Parent Window to Child Window
A same-origin child window can read a value from its opener through window.opener. This page preserves the original parent-to-child example and also keeps the child-to-parent return field used by that example.
Parent Window code Top ↑
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Parent Window</title></head>
<body>
<label>Value for child <input type="text" id="t1" value="plus2net"></label>
<button type="button" id="openChild">open child</button>
<button type="button" id="closeChild">Close child</button>
<form name="f1"><label>Your name <input type="text" id="p_name" name="p_name"></label></form>
<script>
let childWindow = null;
document.getElementById("openChild").addEventListener("click", () => {
childWindow = window.open("child.html", "rating", "width=550,height=170,left=150,top=200");
});
document.getElementById("closeChild").addEventListener("click", () => {
if (childWindow && !childWindow.closed) childWindow.close();
});
</script>
</body>
</html>Child window code Top ↑
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Child Window</title></head>
<body>
<form name="frm">
<label>Enter your name <input type="text" id="c_name" name="c_name"></label>
<button type="button" id="sendBack">Pass data and Close me</button>
</form>
<script>
if (window.opener && !window.opener.closed) {
document.getElementById("c_name").value = window.opener.document.getElementById("t1")?.value ?? "";
}
document.getElementById("sendBack").addEventListener("click", () => {
if (window.opener && !window.opener.closed) {
const parentField = window.opener.document.getElementById("p_name");
if (parentField) parentField.value = document.getElementById("c_name").value;
}
window.close();
});
</script>
</body>
</html>Important notes Top ↑
The direct window.opener.document access shown here is intended for same-origin pages. Popup blocking can make window.open() return null, and opener access may also be severed by noopener or cross-origin opener policy.
Passing data from Child to Parent Window
Window object Reference Window refreshing Parent window from Child
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
Subscribe to our YouTube Channel here
