팝업 :: 췐틀맨 devlog

팝업

2024년 08월 28일

chantleman
작성자
2024.08.28.:51

팝업을 띄우기 위해서는 window.open메소드를 사용해야합니다. (window는 최상위 객체라 생략 가능)

open(URL, target or name, specs ...)

target의 속성값 : _self, _blank(기본), _top, _parent

↓ 부모창 ↓

부모창에서 자식창으로 데이터 보내는 법 1

<body>
    <textarea id="oldText" rows="20" cols="40">
        부모창의 텍스트필드.. 
    </textarea> <br>
    <input type="button" value="팝업띄우기">
    <input type="button" value="팝업 끄기">
    <input type="button" value="보내기">

    <script>
        let ch;
        document.querySelector('input').addEventListener('click', function () {
        	ch = open('./새창.html', 'name', 'width=400 height=300 left=500px');
		});

		//부모창에서 자식창으로 데이터 보내는 법 1
        let pp=function() {
            let oldTxt = document.querySelector('#oldText').value;

            //자식창의 textarea
            ch.document.querySelector('#newText').value = oldTxt;
        };
        let btns=document.querySelectorAll('input');
        btns[2].addEventListener('click', pp);

        document.querySelector('#oldText').addEventListener('keydown', (e) => {
            if (e.key == "Enter")  pp();
        });

        //팝업 끄기 버튼        
        btns[1].addEventListener('click',()=>{
            ch.close();
        });
    </script>
</body>
</html>

↓ 자식창 ↓

<body>
    <textarea id="newText" rows="10" cols="30">
        여기는 자식창
    </textarea>
    <button>보내기</button>

    <script>
        let fnc; //함수를 fnc 변수에 담을 거임
        let v = document.querySelector('button');
        
        v.addEventListener('click', fnc = function () {
            let newTxtVal = document.querySelector('#newText').value;
            let oldTxtVal = opener.document.querySelector('#oldText'); //부모창
            oldTxtVal.value = newTxtVal;
        });

        let newTxt = document.querySelector('#newText');
        newTxt.addEventListener('keydown', function (e) { //엔터쳤을 때 이벤트
            console.log("이벤트 객체 >>", e);  //엔터키가 눌리면 keyCode는 13이 반환됨          
            if (e.keyCode == 13)  fnc();             
        });      
    </script>
</body>
</html>

부모창에서 자식창으로 데이터 보내는 법 2

   <script>
        let fnc; //함수를 fnc 변수에 담을 거임
        let v = document.querySelector('button');
        v.addEventListener('click', fnc = function () {
            let newTxtVal = document.querySelector('#newText').value;
            let oldTxtVal = opener.document.querySelector('#oldText'); //부모창
            oldTxtVal.value = newTxtVal;
        });
  
        let c=document.getElementsByTagName('textarea')[0];
        let t=  opener.document.getElementsByTagName('textarea')[0];
        let p = opener.document.getElementsByTagName('input')[2];
        p.addEventListener('click', function(){
             c.innerHTML=t.value;
        });


        let newTxt = document.querySelector('#newText');
        newTxt.addEventListener('keydown', function (e) { //엔터쳤을 때 이벤트 
            if (e.keyCode == 13)  fnc();                     
        });      
    </script>

opener : 부모창을 가리킴

↓ 결과 ↓

자식창 → 부모창

부모창 → 자식창

728x90

'js' 카테고리의 다른 글

setTimeout을 이용한 랜덤색상변경 예제 (0)	2024.08.29
setTimeout(), setInterval() (0)	2024.08.29
href, replace()를 이용한 페이지 이동 (0)	2024.08.22
BOM, DOM (0)	2024.08.21
window.onload를 활용한 lotto예제 (0)	2024.08.21

다음 글이 없습니다.

이전 글이 없습니다.

'js' 카테고리의 다른 글

티스토리툴바