[JavaScript] window.open() - 새탭/새창 띄우기, 닫기 이벤트 활용

window.open() 기능을 활용하면 새창이나 새탭으로 뭔가를 띄울 수 있다.

var win = window.open("/"); // 새탭에서 열림
var win = window.open("/", "", "_blank"); // 새창에서 열림

 

참고로 새로운 url을 열 때 현재 사이트 말고 다른 사이트 주소를 적을 경우 활용도가 많이 떨어진다.

약간 cross-origin frame스러운 문제가 발생한다.

 

어쨌든 저렇게 열고 win.document.title = 'test' 이렇게 하면 그 창의 제목도 바꿀 수 있다.

win.document.body.innerHTML = '<div>test</div>'; 이렇게 하면 내용도 바꿀 수 있다.

그래서 주소는 정상인데 페이지가 이상한 그런 상태도 만들 수 있다.

 

그리고 열린 창을 부모창에서 닫으려면 win.close(); 이렇게 하면 된다.

자식창이 닫힌걸 감지해서 뭔가를 하려면 다음과 같이 적으면 된다.

win.onbeforeunload = function(){
    console.log("closed");
}

 

 

테스트를 일단 대충 만들긴 했는데 한번에 여러 창을 띄우는 경우에 대한 대비는 잘 안되어 있어서 하나만 띄우는 걸로 테스트 해보는걸 추천하고 여러 창을 띄우고 제어하려면 약간 배열을 이용하는 일이 필요해 보인다.