let pop = wondow.open(파일위치, 창이름, 옵션): 팝업창 띄우기
pop.close(): '목표의 팝업창'만 닫는다.
window.close(): 현재 브라우저 창 닫기 '목표의 팝업창'
self.close(): 현재 브라우저 창은 닫히고 '목표의 팝업창' 유지
pop.moveTo(x, y): 현재 위치에 관계없이 좌표값을 이동하는 것(절대적 위치 이동)
pop.moveBy(x, y): 현재 위치에서 좌표값 만큼 이동(상대적 위치 이동)
pop.resizeTo(폭, 높이): 절대적 크기로 늘림
pop.resizeBy(폭, 높이): 상대적 크기로 늘림
window.outerWidth: 테두리를 포함하는 윈도우 창 넓이
window.outerHeight: 테두리를 포함하는 윈도우 창 높이
window.innerWidth: 테두리를 제외한 윈도우 창 넓이
window.innerHeight: 테두리를 제외한 윈도우 창 높이
window.screenX: 창의 x 좌표
window.screenY: 창위 y 좌표
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
var pop;
var winOpen = () => {
pop = window.open("js09_popup.html", "winName1", "width=400px, height=350px,left=200px,top=150px" );
}
console.log(pop)
function popupClose(){
window.close();
}
var popupMove = () => {
pop.moveTo(300, 300);
}
var popupResize = () => {
pop.resizeBy(10, 10);
}
var winInformation = () =>{
var txt = "";
txt += "테두리 포함 width" + window.outerWidth + "<br />";
txt += "테두리 포함 height=" + window.outerHeight+ "<br />"
txt += "테두리 제외 width=" + window.innerWidth+ "<br />";
txt += "테두리 제외 height=" + window.innerHeight+ "<br />";
txt += "창의 위치 X좌표=" + window.screenX + "<br />";
txt += "창의 위치 Y좌표=" + window.screenY + "<br />";
document.getElementById("winView").innerHTML = txt;
}
</script>
</head>
<body onload = "winOpen(); winInformation(); ">
<h1>window 내장 객체</h1>
<input type="button" value="팝업 열기" onclick="winOpen()"/>
<input type="button" value="팝업 닫기" onclick="popupClose()"/>
<input type="button" value="팝업창이동" onclick="popupMove()"/>
<input type="button" value="팝업창크기조절" onclick="popupResize()"/>
<div id="winView"></div>
</body>
</html>