부모창과 자식창 통신하기

툴로 제작한 페이지 내에서 php로 작성한 iframe을 호출하도록 하는 코드가 있다.
그 코드엔 두가지 문제가 있었다.

1. 페이지 이동시 스크롤 아래에 있음

회원가입 버튼을 누르고 나서 띄워주는 성공결과 창에서
스크롤이 내가 원하는대로 맨 위에 위치해 데이터를 보여주는 대신
이전 페이지에서 스크롤이 위치했던 위치에 그대로 남아
원하는 데이터를 보여주지 않는다.

2. 이전 페이지와 동일한 height

이전 페이지는 회원가입 페이지라 input 칸이 많아서
컨텐츠 길이가 매우 길었는데
회원가입 성공 후 보여지는 iframe에서 직전페이지인 회원가입 페이지의
height을 그대로 부모창에 보내주고 있었음.
(부모창에서는 iframe의 height값 받아서 리사이징 해주고 있음

---

첫번째 시도:

window.parent.scrollTo(0,0);

결과: iframe과 부모창의 도메인이 달라 cross frame 이슈로 에러가 나서 실패.

두번째 시도:

window.parent.postMessage({ height: scrollHeight }, '*');

결과: 성공
postMessage 함수는 부모자식창 간에 값을 전달해주는 함수로
cross frame 관련 이슈를 회피할 수 있다고 한다.

내가 보여주고자하는 컨텐츠의 height을 scrollHeight 변수에 담아 postMessage로 부모창에 전달해서 원하는대로의 컨텐츠 길이를 iframe 안에 노출 시키는 것에 성공했다.
그리고 부모창에서 window.scrollTo(0,0)로 맨 위에 스크롤바를 위치시켜서 원하는 결과를 노출 시킬 수 있었다.

끝