브라우저 "창닫기" 버튼 만들기 > 기술자료

• 목록

홈페이지에서 공지사항이나 이벤트와 같은 창이 열리고, 그 창에서 "닫기" 버튼을 클릭하면 창이 사라지는 기능입니다.

샘플 : https://www.happyjung.com/demo/php/test_win.php  의 주소를 클릭해서 접속하면 창닫기가 잘 됩니다.
링크를 복사해서 브라우저 창에 붙여 넣고 페이지를 열면 창닫기가 작동 안하는 경우가 있습니다.

IE 는 부모창 없이 창닫기 페이지가 독자적으로 접근한 경우에도 페이지 닫기가 가능합니다.
Chrome , FF 등은 독자적인 창닫기 가 불가능하며 그이유는 다음과 같습니다.
Scripts may close only the windows that were opened by it.


1. History 활용  
부모창 있을때 창닫기 : 정상 ( IE 11 , Edge , FireFox , Chrome , Opera , Safari )
부모창 없을때 창닫기 : 정상 ( IE 11 , Edge , Safari )

<script type="text/javascript">
function closeWin() {
    var nvua = navigator.userAgent;
    if (nvua.indexOf('MSIE') >= 0){
        if(nvua.indexOf('MSIE 5.0') == -1) {
            top.opener = '';
        }
    } else if (nvua.indexOf('Gecko') >= 0){
        top.name = 'CLOSE_WINDOW';
        wid = window.open('','CLOSE_WINDOW');
    }
    top.close();
}
</script>
<a href="#" onclick="javascript:history.onclick=closeWin();">닫기</a>


2. A 링크 활용  
부모창 있을때 창닫기 : 정상 ( IE 11 , Edge , FireFox , Chrome , Opera , Safari )
부모창 없을때 창닫기 : 정상 ( IE 11 , Edge , Safari )

<a href="#" onclick="javascript:window.close();">창닫기</a>

<a href="#" onclick="javascript:self.close();">창닫기</a>

 
3. 버튼 활용   
부모창 있을때 창닫기 : 정상 ( IE 11 , Edge , FireFox , Chrome , Opera , Safari )
부모창 없을때 창닫기 : 정상 ( IE 11 , Edge , Safari )

<input type="button" value=" 창닫기 " onclick="window.close();">

<input type="button" value=" 창닫기 " onclick="window.open('','_self').close();">

<script>
function closeMe() {
    var win=window.open("","_self");
    win.close();
}
</script>
<input type="button" name="Close" onclick="closeMe()" value=" 창닫기 ">

<script>
function quitBox(cmd) {   
    if (cmd=='quit') {
        open(location, '_self').close();
    }   
    return false;   
}
</script>
<input type="button" name="Quit" id="Quit" onclick="return quitBox('quit');" value=" 창닫기 ">


4. jQuery 활용
부모창 있을때 창닫기 : 정상 ( IE 11 , Edge , FireFox , Chrome , Opera , iPhone Safari , iPhone Chrome )
부모창 없을때 창닫기 : 정상 ( IE 11 , Edge , Safari )

<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<button id="btn_close" type="button">창닫기</button>
<script>
$(function() {
    $("#btn_close").on('click', function() {
        self.close();
    });
});
</script>


5. 프레임셋 문서를 이미지클릭으로 닫기
 <a href="#" onclick="javascript:top.window.close();"><img border="0" src="../close.gif"></a>
 

6. 프레임셋 문서 전체닫기
 <a href="javascript:top.window.close();">창닫기</a>


7. 프레임셋 문서를 버튼클릭으로 닫기
 <input type="button" value=" 창닫기 " onclick="top.window.close()">



8. 부모창 닫기
 <a href="#" onclick="javascript:parent.close();">부모창 닫기</a>



참고자료
http://www.ddalchi.co.kr/ddart/cgi-bin/ddbread.cgi?db=bbs_06&anum=39&page=1
http://www.dbinfo.co.kr/bbs/board.php?bo_table=dbinfo_html_javascri&wr_id=31
http://luvbaby.tistory.com/96
https://code.i-harness.com/ko/q/12d8859