개발/JavaScript
JavaScript - window 객체
뉴에이스
2020. 6. 4. 16:38
window 객체 : BOM(Browser Object Model)
windows가 제공해주는 함수
window는 생략 후 사용 가능
팝업창 띄우기 - windows.open(url, target, option)
부모페이지 소스
<body>
<button onclick="openPop(1)">팝업창1</button>
<button onclick="openPop(2)">팝업창2</button>
<button onclick="openPop(3)">팝업창3</button>
<button onclick="openPop(4)">팝업창4</button>
<h2 id="result"></h2>
<script>
function openPop(type) {
switch (type) {
case 1:
window.open("http://www.naver.com", "pop1", "width=400, height=300");
break;
case 2:
window.open("http://www.naver.com", "", "width=400, height=300");
break;
case 3:
console.log(screen.width, screen.height);
// 화면의 가운데에 팝업창을 띄우려고 할때
// (화면해상도-팝업창크기)/2
var left = (screen.width - 400) / 2;
var top = (screen.height - 300) / 2;
window.open("http://www.naver.com", "", `width=400, height=300, top=${top}, left=${left}`);
break;
case 4:
window.open("test01_child.html", "", "width=400, height=300");
break;
}
}
function doResult(msg) {
document.querySelector("#result").innerHTML += msg;
}
</script>
</body>
자식페이지 소스
<body>
<h2>자식 페이지</h2>
메세지 : <input type="text" id="msg" />
<button onclick="winClose();">닫기</button>
<script>
function winClose() {
// 자신을 띄운 창에 접근 (부모창) : opener
//document.msg.value
opener.doResult(document.querySelector("#msg").value);
self.close();
}
</script>
</body>
결과
