[Javascript] 팝업 띄우기 (window.open) 및 파라미터 파싱

오늘 배워볼 코딩은 Javascript를 활용해 팝업을 띄운 뒤 Form 데이터의 파라미터를 넘기는 기능을 공부해볼 것이다.

 

Javascript 코드

function openWindowPopup(){ 
    var windowOpen = window.open('URL', '팝업명', 'width=500, height=500, 
                                 resizable=1, scrollbars=no, status=0, 
                                 titlebar=0, toolbar=0, left=300, top=200' );
    document.폼명.action = '액션URL';
    document.폼명.target = '팝업명';
    return true;
}

HTML 코드

<form name="폼명" method="post" action="" onsubmit="return openWindowPopup()">
    <input type="hidden" name="param1"    value = "파라미터 값">
    <input type="hidden" name="param2"    value = "파라미터 값">
    <input type="hidden" name="param3"    value = "파라미터 값">
</form>

 

소스를 보면 window.open을 사용함 으로서 팝업을 띄우는 로직이다. 로직 순서는 다음과 같다

1. window.open 빈 팝업창 띄우기 (* 빈 팝업창을 띄울땐 URL부분은 비어 있어야한다)

2. 폼을 활용해 document.폼명.target을 사용함으로서 빈 팝업창에 폼을 데이터를 넘긴다.

 

window.open을 사용할때 다양한 옵션들이 존재하는데 옵션은 다음과 같다.

 

정의	설명
width = 500	팝업 폭
height = 500	팝업 높이
resizeable = 0	창 크기 조절
scrollbars = 0	스크롤바 존재 여부
status = 0	상태표시줄 존재 여부
titlebar = 0	타이틀 존재 여부
toolbar = 0	툴바 존재 여부
left = 200	팝업 위치
top = 200	팝업 위치
location = 0	주소표시줄 존재 여부
fullscreen	최대창 크기로 열기(F11과 비슷한 기능)