고정 헤더 영역
상세 컨텐츠
본문
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>
결과
'개발 > JavaScript' 카테고리의 다른 글
| JavaScript - onload 함수와 스크립트의 실행 위치에 관계 (0) | 2020.06.05 |
|---|---|
| JavaScript - window 객체 활용(open, moveBy, resizeTo, onunload) (0) | 2020.06.04 |
| JavaScript - select 객체의 옵션 추가, 삭제, 비활성화(options.length, disabled) (0) | 2020.06.04 |
| JavaScript - select 객체(selectedIndex, options) (0) | 2020.06.04 |
| JavaScript - checkbox 상태 확인(checked) (0) | 2020.06.04 |
댓글 영역