-
웹브라우저 자바스크립트 - 창 제어JavaScript/생활코딩 2018. 11. 23. 14:58
창 제어 - https://opentutorials.org/course/1375/6651
자바스크립트를 이용해서 새로운 창을 열고닫는 방법 창과 창 사이에 커뮤니케이션 하는 방법에 대한 내용
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('a.html');" />
</li>
<li>
두번째 인자는 새 창의 이름이다. _self는 스크립트가 실행되는 창을 의미한다.<br />
<input type="button" onclick="open2()" value="window.open('a.html', '_self');" />
</li>
<li>
_blank는 새 창을 의미한다. <br />
<input type="button" onclick="open3()" value="window.open('a.html', '_blank');" />
</li>
<li>
창에 이름을 붙일 수 있다. open을 재실행 했을 때 동일한 이름의 창이 있다면 그곳으로 문서가 로드된다.<br />
<input type="button" onclick="open4()" value="window.open('a.html', 'ot');" />
</li>
<li>
세번재 인자는 새 창의 모양과 관련된 속성이 온다.<br />
<input type="button" onclick="open5()" value="window.open('a.html', '_blank', 'width=200, height=200');" />
</li>
</ul>
<script>
function open1(){
window.open('a.html');
}
function open2(){
window.open('a.html', '_self');
}
function open3(){
window.open('a.html', '_blank');
}
function open4(){
window.open('a.html', 'ot');
}
function open5(){
window.open('a.html', '_blank', 'width=200, height=200');
}
</script>
</body>
</html>
[실행화면]
새 창에 접근
보안상의 이유로 아래 내용은 서버를구축한 상태에서 실행해야 작업이 가능하다.
<!DOCTYPE html>
<html>
<body>
<input type="button" value="open" onclick="winopen();" /> //winopen함수가 실행
<input type="text" onkeypress="winmessage(this.value)" /> //타이핑을해서 글자를 완성할 때마다 winmessage실행
<input type="button" value="close" onclick="winclose()" /> //winclose함수가 실행
<script>
function winopen(){
win = window.open('c.html', 'width=300px, height=500px'); //win이라는 전역변수(window객체)에 열릴파일을 담아서 보여줌.
}
function winmessage(msg){
win.document.getElementById('message').innerText=msg; //타이핑하여 입력한 값은 msg가 되며 win에서 열린 파일안의 코드 중 id값이 message인 값의 글자가 msg가 된다. 이부분에서 새창에 접근할 수 있다는 것을 알수있음.
}
function winclose(){ //새롭게 연 c.html을 직접끄지 않아도 win이라는 객체를 이용하여 c.tml파일을 닫을 수 있음.
win.close();
}
</script>
</body>
</html>
[실행화면]
open클릭시 c.html 파일이 새창으로 열린다.
빈칸에 내용을 적으면 c.html파일에 id값이 message인 값이 동시에 같이 바뀐다.
브라우저의 보안
윈도우를 열고 닫고 팝업을 열고 닫고 하는데 있어서 보안상의 이슈가 있다.
그래서 아래와 같이 도메인이 같을 경우만 다른창의 제어가 가능하다.
팝업 차단
<!DOCTYPE html>
<html>
<body>
<script>
window.open('demo2.html');
</script>
</body>
</html>
[실행화면]
window.open을 이용하여 파일이 열리자마자 나타나는 팝업일 경우, 팝업옵션으로 사용자가 클릭하여 선택할 수 있도록 한다.
파일에 있는 버튼을 클릭하여 새창(팝업)을 생성하는 것과 파일이 열리자마자 새창(팝업)이 열리는 것에 대해 브라우저는 다르게 동작한다.
이유는 보안상, 혹은 사용자의 불편,불만사항을 고려한 설정이다.
'JavaScript > 생활코딩' 카테고리의 다른 글
웹브라우저 자바스크립트 - 제어 대상을 찾기 (0) 2018.11.23 웹브라우저 자바스크립트 - DOM (0) 2018.11.23 웹브라우저 자바스크립트 - Navigator객체 (0) 2018.11.22 웹브라우저 자바스크립트 - Location객체 (0) 2018.11.22 웹브라우저 자바스크립트 - 사용자와 커뮤니케이션 하기 (0) 2018.11.22 댓글
