JavaScript Object의 window와 window.opener간 전달할 때 주의할 점!

JavaScript Object의 window와 window.opener간 전달할 때 주의할 점!

main window

window.myFunc = (newType) = {
  console.log(newType instanceof Object ? 'Object' : 'Not Object');
  console.log(typeof newType === 'object' ? 'Object' : 'Not Object');
};

var child = window.open();

child window

window.opener.myFunc({a: 1});

위와 같이 main window에서 child window를 열고, child window에서 main window에 global function을 call한 후, 값을 비교할 때는 "typeof value"와 같은 형태로 해야 안전하다.

* Cross-Origin을 해결하기 위해서는,

postmessge/onmessage를 사용하여, 대화를 하는 것을 추천한다.

const domain = 'https://mysite.com';

function onMessage(event)
{
  if (event.origin !== domain) {
    return;
  }

  const data = JSON.parse(event.data);
}

window.addEventListener("message", onMessage, false);

const domain = 'https://mysite.com';
const popup = window.open(`${ domain }/popup.html`, 'My Popup');

popup.postmessage(JSON.stringify({data:3}), domain);