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(){
//pop.close(); // 1.'목표의 팝업창'만 닫는 메소드
window.close(); // 2.현재 브라우저 창 & '목표의 팝업창' 닫기
//self.close(); //3.현재 브라우저 창은 닫히고 '목표의 팝업창' 유지
}
//팝업창 이동
var popupMove = () => {
/*절대 위치로 이동: 현재 위치에 상관없이(0,0시작) 좌표값을 이동하는 것
x,y 특정 위치로 가라 */
pop.moveTo(300, 300);
/*상대 위치로 이동:pop.moveBy(10, -10); */
}
//팝업창 크기설정
var popupResize = () => {
//**절대크기, parameter 옵샨: 폭과 높이 **
//pop.resizeTo(600, 550);
//**상대크기, parameter 옵션: 폭과 높이 **
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>
풀스택eDot