window.open 값 전달하기

부모창에서 버튼을 클릭하면 자식창이 열린다.
자식창이 열릴 때마다 부모창의 값과 자식창의 값을 동일하게 만들기

부모:

    <div class="container">
      <h1>parent</h1>
      <div id="content" contenteditable="true"></div>
      <button type="button" class="open-btn">open</button>
    </div>

자식:

    <div id="tool"></div>
    <input type="file" accept="image/*" class="img-input" />
    <div id="editor" contenteditable="true">
      <p>Hello!</p>
    </div>
    <button type="button" class="goToParent">등록</button>
    <button type="button" class="getData">받기</button>

 

부모 js:

let open;
const openBtn = document.querySelector('.open-btn');
const goToChild = document.querySelector('.to-child');

openBtn.addEventListener('click', function (e) {
  letsOpen();
});

function letsOpen() {
  open = window.open(
    'open.html',
    'childWindow',
    'width=800, height=750, resizable = yes,scrollbars = no',
  );
}

window.open web api를 이용하여 버튼을 클릭하면 자식창이 열린다.

 

1. 자식창에서 값을 입력하고 등록 버튼을 클릭했을 때 부모창에 값 전달시키기
(자식 -> 부모)

자식 js:

const submitBtn = document.querySelector('.goToParent');

submitBtn.addEventListener('click', function (e) {
  opener.document.getElementById('content').innerHTML = editor.innerHTML;
  window.close();
});

innerHTML을 이용한다.

 

2. 부모에서 입력한 값을, 자식창 오픈과 동시에 자식창에 전달시키기
(부모->자식)

2.1 자식창이 렌더링되자마자(오픈되자마자) 부모 값을 가져오기

document.addEventListener('DOMContentLoaded', function () {
  editor.innerHTML = opener.document.getElementById('content').innerHTML;
});

 

2.2 전달받기 이벤트 버튼을 만들고 클릭시키기
-> 자식창 렌더링 됐을 때 전달받기 버튼을 트리

getData.addEventListener('click', function (e) {
  editor.innerHTML = opener.document.getElementById('content').innerHTML;
});

// 트리거 이벤트
let triggerEvt = function (elem) {
  // Create our event (with options)
  let evt = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window,
  });

  let canceled = !elem.dispatchEvent(evt);
};

triggerEvt(getData);

getData 클릭시키기 -> getData 클릭이벤트리스너 동작

MoueEvent 라는 web api를 사용해보았다.

https://developer.mozilla.org/ko/docs/Web/API/MouseEvent