[JavaScript]window.open() - 팝업 만들기 ⇒openr: 부모창에 값 보내기, CloneNode() :노드 복제

JavaScript

[JavaScript]window.open() - 팝업 만들기 ⇒openr: 부모창에 값 보내기, CloneNode() :노드 복제

lavender1122 2024. 4. 20. 17:57

Window.open('url','name','option')

window.open('url','name','option')

url

새창(팝업창)에 보여질 주소

name

새창 속성 또는 새창 이름 지정

_blank: 새창으로 연다(기본값)

_parent: 부모 프레임 열린다

_self : 현재 페이지에서 팝업 열린다

_top : 현재 페이지에서 최상의 페이지에서 팝업이 열린다

option

사이즈 정의
- width : 새 창 가로 길이
- height : 새 창 세로 길이
- top : 화면 위에서 팝업 위치 지정
- left: 화면 왼쪽에서 부터 팝업 위치 지정

예시

window.open("popUp.html","popUp","width=650, height=480, left=100, top=50");

 window.open("PalDDack/AddrAdd.do", "배송지입력", "width=650, height=480, left=100, top=50");

opener(팝업창에서 부모창 값 보내기)

opener.document.querySelector('.orderName').value=selForm.orderName.value;

원본

parent.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>parnet</title>
<script>
function fn_pop(){
    window.open("popUp.html","popUp","width=650, height=480, left=100, top=50");
}
</script>
</head>
<body>
    <form action="">
        <label for="orderName">이름</label>
        <input type="text" id="orderName" class="orderName" name="orderName" placeholder="이름입력" value=""><br>
        <label for="orderTel">휴대폰</label>
        <input type="text" id="orderTel" name="orderTel" placeholder="휴대폰 입력" value=""><br>
        <label for="orderAdd">배송주소</label>
        <input type="text" id="orderAdd" name="orderAdd" placeholder="주소입력"value=""><br>
        <label for="orderReq">배송메모</label>
        <input type="text" id="orderReq" name="orderReq" placeholder="배송메모입력" value=""><br>
        <button type="button" onclick="fn_click(this)">선택</button>
        <button type="button" onclick="">삭제버튼</button>
    </form>
    <button onclick="fn_pop()">팝업열기</button>
</body>
</html>

popUp.html ⇒jsp 사용함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<style>
    .newInfo{
        display: none;
    }
</style>
    <title>popUp</title>
</head>
<body>
    <button onclick="f_add()">+신규 배송지 입력하기</button>
    <div class="newInfo">
        <form action="#" method="post">
            <label for="orderName">이름</label>
            <input type="text" id="orderName" name="orderName" placeholder="이름입력"><br>
            <label for="orderTel">휴대폰</label>
            <input type="text" id="orderTel" name="orderTel" placeholder="휴대폰 입력"><br>
            <label for="orderAdd">배송주소</label>
            <input type="text" id="orderAdd" name="orderAdd" placeholder="주소입력"><br>
            <label for="orderReq">배송메모</label>
            <input type="text" id="orderReq" name="orderReq" placeholder="배송메모입력"><br>
            <button type="submit">완료</button>
            <button type="button" onclick="f_clo()">X</button>
        </form>
    </div>
    
    <!--입력된 정보 -->
    //for문 넣음
    <div class="oldInfo">
        <form action="">
            <label for="orderName">이름</label>
            <input type="text" id="orderName" class="orderName" name="orderName" placeholder="이름입력" value="아무개"><br>
            <label for="orderTel">휴대폰</label>
            <input type="text" id="orderTel" name="orderTel" placeholder="휴대폰 입력" value="1234"><br>
            <label for="orderAdd">배송주소</label>
            <input type="text" id="orderAdd" name="orderAdd" placeholder="주소입력"value="어쩌구"><br>
            <label for="orderReq">배송메모</label>
            <input type="text" id="orderReq" name="orderReq" placeholder="배송메모입력" value="저쩌구"><br>
            <button type="button" onclick="fn_click(this)">선택</button>
            <button type="button" onclick="">삭제버튼</button>
        </form>
        //for문 끝
    </div>

    <script>
    const newInfo = document.querySelector(".newInfo");
    const orderName = document.querySelectorAll(".orderName");

    function fn_click(pThis){
        //form 태그인경우 사용가능 form 아니면 value 안나옴
        console.log(pThis.parentElement.parentElement);//oldInfo
        console.log(pThis.parentElement);//form
        let selForm = pThis.parentElement;
        console.log(pThis.parentElement.orderName.value);//value 나옴
        // console.log(pThis.parentElement.orderTel.value);//value 나옴 //name이든 id든 상관없는듯
        //부모창으로 값 전송
        opener.document.querySelector('.orderName').value=selForm.orderName.value;

    }
    function f_add(){
        newInfo.style.display="block";
    }
    function f_clo(){
        newInfo.style.display="none";

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

.cloneNode(); ⇒ 요소 복제

원하는노드.cloneNode(true);

<div id="sample" style="display: none">
        <form action="#"><!-- form 기본 method="get" -->
            이름 <input type="text" name="" value=""><br>
            나이 <input type="text" name="" value=""><br>
            별명 <input type="text" name="" value=""><br>
            <button type="button" onclick="f_comp()">완료</button>
            <button>Submit</button>
        </form>
</div>
<script>
	const sample = document.querySelector('#sample');
    function f_comp(){
            let newSample = sample.cloneNode(true); //
    }
</script>

.removeChild(); ⇒ 요소 제거

부모에서 포함된 자식 노드가 존재할 경우 일치하는 Id(#) 또는 Class(.) 등 과 같은 속성을 통해 자식 노드 제거

newSample.querySelector("form").removeChild(newSample.querySelector("button"));

⇒ 복제한 노드에 form안에 button 제거

.appendChild(노드);

선택한 요소 안에 자식 요소 추가

<body>
    <!-- 테블릿 만드릭 -->
    <div id="sample" style="display: none">
        <form action="#"><!-- form 기본 method="get" -->
            이름 <input type="text" name="" value=""><br>
            나이 <input type="text" name="" value=""><br>
            별명 <input type="text" name="" value=""><br>
            <button type="button" onclick="f_comp()">완료</button>
            <button>Submit</button>
        </form>
    </div>
    <button onclick="f_add()">+추가</button>
    <div id="disp">
        조회칸
    </div>
    <script>
        const disp = document.querySelector('#disp');
        const sample = document.querySelector('#sample');
        function f_comp(){
            let newSample = sample.cloneNode(true); //
            newSample.querySelector("form").removeChild(newSample.querySelector("button"));
            disp.appendChild(newSample);
        }
    </script>

⇒'조회칸' 아래 복제된 sample 추가된다(중복없이)

원본

parent.html

<!DOCTYPE html>
<meta charset="UTF-8">
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="f_open()">열기</button>
<script>
    function f_open(){
        window.open("기초popup.html","pop","width=300,height=300");
    }
</script>
</body>
</html>

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 테블릿 만드릭 -->
    <div id="sample" style="display: none">
        <form action="#" id="infoForm"><!-- form 기본 method="get" -->
            이름 <input type="text" name="" value=""><br>
            나이 <input type="text" name="" value=""><br>
            별명 <input type="text" name="" value=""><br>
            <button type="button" onclick="f_comp()">완료</button>
            <button>Submit</button>
        </form>
    </div>
    <button onclick="f_add()">+추가</button>
    <div id="disp">
        조회칸
    </div>
    <script>
        const disp = document.querySelector('#disp');
        const sample = document.querySelector('#sample');
        function f_comp(){
            let newSample = sample.cloneNode(true); //
            newSample.querySelector("form").removeChild(newSample.querySelector("button"));
            disp.appendChild(newSample);
            disp.appendChild(document.createElement("hr"));
            sample.style.display="none";
            document.querySelector('#infoForm').reset(); //form 값 초기화
        }
        function f_add(){
            sample.style.display="block";
        }
    </script>
</body>
</html>