해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.
자바스크립트 기본 문법 :: 창(Window) 제어
window.open 메소드는 새로운 창을 생성해주는 메소드입니다.
현대의 브라우저는 대부분 탭을 지원하고 있기 때문에, window.open 은 새 탭을 만들어줍니다.
<!DOCTYPE html>
<html>
<style>li {padding:10px; list-style: none}</style>
<body>
<ul>
<li>
첫번째 인자는 새 창에 로드할 문서의 URL이다. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어진다.<br />
<input type="button" onclick="open1()" value="window.open('demo2.html');" />
</li>
<li>
두번째 인자는 새 창의 이름이다. _self는 스크립트가 실행되는 창을 의미한다.<br />
<input type="button" onclick="open2()" value="window.open('demo2.html', '_self');" />
</li>
<li>
_blank는 새 창을 의미한다. <br />
<input type="button" onclick="open3()" value="window.open('demo2.html', '_blank');" />
</li>
<li>
창에 이름을 붙일 수 있다. open을 재실행 했을 때 동일한 이름의 창이 있다면 그곳으로 문서가 로드된다.<br />
<input type="button" onclick="open4()" value="window.open('demo2.html', 'ot');" />
</li>
<li>
세번재 인자는 새 창의 모양과 관련된 속성이 온다.<br />
<input type="button" onclick="open5()" value="window.open('demo2.html', '_blank', 'width=200, height=200, resizable=yes');" />
</li>
</ul>
<script>
function open1(){
window.open('demo2.html');
}
function open2(){
window.open('demo2.html', '_self');
}
function open3(){
window.open('demo2.html', '_blank');
}
function open4(){
window.open('demo2.html', 'ot');
}
function open5(){
window.open('demo2.html', '_blank', 'width=200, height=200, resizable=no');
}
</script>
</body>
</html>
위의 예제는 생활코딩 것을 그대로 가져왔습니다.
window.open 의 첫번째 인자는 열 파일을 의미하고,
두번째 인자는 열릴 창을 새로 만들것인지, 기존에 열려있던 창을 바꿀 것인지를 결정합니다.
세번재 인자를 넣게 되면, 새로 열리는 창이 탭의 형태가 아닌 팝업의 형태로 열리게 됩니다.
따라서 팝업의 크기를 정해주는 width와 height 속성이 들어가게 됩니다.
resizable 은 팝업의 크기를 사용자가 조절할 수 있느냐, 없느냐를 결정하는 속성입니다.
자바스크립트 기본 문법 :: 창(Window) 간 상호작용
창 간 상호작용은 현재 보안상의 이유로 같은 도메인 내에서만 동작하고 있습니다.
<!DOCTYPE html>
<html>
<body>
<input type="button" value="open" onclick="winopen();" />
<input type="text" onkeypress="winmessage(this.value)" />
<input type="button" value="close" onclick="winclose()" />
<script>
function winopen(){
win = window.open('demo2.html', 'ot', 'width=300px, height=500px');
}
function winmessage(msg){
win.document.getElementById('message').innerText=msg;
}
function winclose(){
win.close();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="message"></div>
</body>
</html>
위의 코드는 새로운 창을 열고, 입력창에 글자를 타이핑 하면 그 글자가 동기화 되어
열어진 새 창에 출력되는 코드입니다.
winmessage 함수를 보면, getElementById('message') 부분이 있는데,
이는 새로 만들어질 창의 div 이름입니다.
이 div 박스 안에 우리가 입력한 글자가 그대로 출력됩니다.
이 실습은 각자 서버가 있어야하기 때문에, 서버 구축을 하고 테스트 해보시길 바랍니다.
참고로 저는 vscode 에서 아파치깔아 실습 진행했습니다.
자바스크립트 기본 문법 :: 팝업 차단
사용자의 인터렉션 없이 창을 열려고 하면 팝업이 차단됩니다.
인터넷 쇼핑같은거 할 때 보면 화면 우측 상단에 팝업 차단됨 이라고 뜨는거 자주 보셨죠?
사용자가 팝업을 보겠다고 하지 않는 이상 window.open 으로 열어진 팝업은 브라우저 상에서
자체적으로 차단시킵니다.