팝업에서 부모창의 iframe으로 접근하기

새로운 회사에 이직해 정말 오랫만에 자바스크립트를 만지다 보니 많이 헷갈립니다.

제가 근무하는 곳은 주로 IE위주로 작업이 되어 있어 타 브라우저에서 작동 안되는 경우가 많습니다. 이것들을 언제 고치나 앞이 캄캄하기도 하지만 덕분에 좀더 깊이 있게 배울 수 있지 않을까 하는 마음으로 첫 테이프를 끊습니다.

부모창에서 iframe을 두고 그 iframe에 팝업 호출 함수를 통해 팝업을 띄우는 방식에 대해서 설명합니다.
보통 이렇게 하면 브라우저에서 팝업차단이 설정되어 있어도 팝업이 차단되지 않고 호출됩니다.

이곳에서는 실명인증이나 본인확인 혹은 아이핀 팝업을 호출할때 사용하고 있습니다.
보다 쉬운 이해를 위해 아래와 같이 그림을 첨부하오니 참고하시기 바랍니다.

How to access form between window objects (2)

 

1. 부모창에서 경로 없는 팝업 생성 및 아이프레임으로 원하는 주소를 호출

; 비어 있는(about:blank) 팝업이 호출되면서 동시에 특정 주소를 아이프레임으로 호출합니다. 여기서 특정 주소의 소스코드는 2번을 참고하세요!

 

2. 부모창에서 아이프레임으로 호출한 파일

; POST 타입 폼 전송을 팝업으로 호출해 이미 떠 있는 비어있는 팝업에 폼으로 전송한 내용이 들어가게 됩니다. 여기서 중요한 것은 빈 팝업을 호출할때의 윈도우의 이름인 ” popupWindowName” 입니다. 반드시 이것으로 타겟을 지정해주어야 이미 열려져 있던 빈 팝업창으로 폼을 전송해줍니다.

사파리에서 간혹 Unsafe Javascript라는 에러가 About:blank 팝업 창에서 뜨는 경우가 있는데 이럴 경우 iframe src에 orgin=[자신의 도메인] 파라미터를 추가해주시면 일단 작동 되는 것을 확인할 수 있습니다.

 

3. 팝업에서 처리한 내용을 부모창으로 가져오기

; 팝업에서 아래와 같이 작성하게 되면 부모창의 아이프레임 즉 2번 소스의  receivedForm을 submit해서 진행해주게 됩니다. 한가지 주의해야 할 점은 contentWindow라고 적혀있는 부분인데, IE에서는 빼도 상관없지만 타 브라우저에서는 작동하지 않는 문제점을 야기 시키니 주의가 필요합니다. 그리고 iframe을 호출할때 반드시 getElementById를 이용해 iframe을 호출해야 정상 작동합니다.

 

가령, 부모창의 iframe이 아닌 부모창 자체의 폼을 submit하려면 어떻게 해야할지 궁금해하시는 분들도 계실까하여 아래 소스코드 첨부합니다.

 

Published by

안반장

Web과 App 개발을 하고 있으며 최근 워드프레스에 관심이 많아져 네이버 카페 워드프레스 홈페이지의 TF팀으로 활동 중 입니다.개인적으로는 안반장의 개발 노트라는 블로그를 운영하면서 개발의 즐거움과 고충들을 차곡차곡 담아가고 있습니다.