[Javascript] 부모창에서 자식창으로 값 전달

부모창에서 자식창으로 값 전달 방법 5가지 알아보기

1. URL 파라미터를 통한 값 전달

부모창

window.open("child.html?data=value");

자식창

var data = new URLSearchParams(window.location.search).get("data");
console.log(data); // "value"

2. window.opener를 통한 값 전달

부모창

var data = "value";
var childWindow = window.open("child.html");

자식창

window.opener.data = "new value";

3. postMessage를 통한 값 전달

부모창

var childWindow = window.open("child.html");

// message event를 수신하는 핸들러
window.addEventListener("message", function(event) {
  console.log(event.data); // "value"
}, false);

자식창

window.opener.postMessage("value", "*");

4. localStorage를 통한 값 전달

부모창

localStorage.setItem("data", "value");
var childWindow = window.open("child.html");

자식창

var data = localStorage.getItem("data");
console.log(data); // "value"

5. cookie를 통한 값 전달

부모창

document.cookie = "data=value";

자식창

var data = document.cookie.replace(/(?:(?:^|.*;\s*)data\s*\=\s*([^;]*).*$)|^.*$/, "$1");
console.log(data); // "value"