230104 JS BOM window.open()

주영재 2023. 1. 4. 19:09

BOM

자바스크립트의 두번째 강력한 기능

BOM은 브라우저 객체 모델이라 하며, 내장객체들을 의미함.

브라우저 상에 사건들을 다룰 때 사용

window는 생략이 가능함

window객체
window.open()-새창을 띄워주는 메서드.
window.close()-현재 창을 끔

window.open(문서 주소, 이름, "옵션=값, 옵션=값, 옵션=값");으로 사용
이름은 창의 별칭. 아무거나 적어도 됨.

옵션
width, height, left, right, top, bottom,->:가 아니라 =으로 사용.
location=yes 또는 no : 윈도우 주소창을 보이게
scrollbars=yes 또는 no : 스크롤바를 보이게
menubar=yes 또는 no : 메뉴바를 보이게
toolbar=yes 또는 no : 툴바를 보이게
status=yes 또는 no : 상태줄 보이게

but, location은 먹히지 않는 브라우저가 대부분이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        window.onload=function() {
            // window.open("popup.html");//open("띄울창", "별칭","옵션")
            window.open("popup.html","별칭","width=500px, height=300px, left=100px, top=50px, location=no");
        }

    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    팝업창

    <input type="checkbox" class="x">오늘하루이창을열지않기

    <script>
        var x=document.querySelector(".x");

        x.addEventListener("click",function(){
            //하루동안 못열게하려면, 쿠키가 들어가야 함
            window.close();


            //opener-주창과 보조창간의 데이터 전달이 가능...
            

        })

    </script>
</body>
</html>

1번을 실행하면 자동으로 2번이 새로운 창으로 실행됨. window.open()때문.

체크박스를 체크하면 창이 닫힘. 그러나 일정 시간동안 열리지 않게 하려면 쿠키가 들어가야 함.

+)opener-주창과 보조창 간의 데이터 전달이 가능. 추후 확인할 것.