오늘 javascript에서 다뤄 볼 내용은 자식요소에서 만들어 놓은 팝업창으로 부모요소의 창을 제어해 보는 시간을 가지도록 해보겠습니다. 그렇다면 html에 어떤 내용을 써야 할지 작성해 보도록 해보겠습니다.
서론
부모창의 html을 작성해보도록하겠습니다. 아래의 html의 특징을 간단하게 서술하고 가볼게요. 저는 html 이름을 "window2.html"으로 그리고 javascript의 이름을 "window2.js"으로 설정했습니다. 그리고 '부모창으로 전달'이라는 버튼을 누르는 메서드는 sendID1()으로, "창을 닫을 때 부모 창으로 전달"이라는 버튼을 누를 때는 sendID2() 메서드로, "창 닫기"라는 것을 누를 때는 onclick="sendID2()" 메서드를 클릭하면 되는 거죠.
이 와중에 ID를 입력하는 input 요소에는 readonly을 작성함으로써 이 문서는 '읽기 전용'임을 명시해 놨습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="window2.js"></script>
<title>자식창에서 부모창을 제어해보자.</title>
</head>
<body onload="requestID()">
<h1>window2.html</h1>
<h2>Window2.js</h2>
ID: <input id="childID" type="text" readonly="readonly" /><br />
<input type="button" value="부모 창으로 전달" onclick="sendID1()" /><br />
<input type="button" value="창을 닫을 때 부모창 으로 전달" onclick="sendID2()" /><br />
<input type="button" value="창 닫기" onclick="self.close()" />
</body>
</html>
만일 여러분도 저와 같이 작성했다면 아래와 같은 화면을 출력할 수 있을 것입니다.
본론
1. 부모 창으로 전달하기
우리가 처음 해볼 것은, 부모 창으로 데이터를 전달해 보는 것입니다. 하지만 전달하기 전에 우리가 알아야 할 것이 있죠. 저는 아래의 명령어들 중 1. opener를 썼다는 사실, 그리고 2. send 함수를 사용함으로써 위의 html onclick 이벤트 발생을 도왔다는 점이 있습니다.
opener는, 자식 창 (현재의 창)을 열어준 부모창을 의미하는데요. 변수를 지정하고, 부모 창으로 넘겨줄 자식 창의 데이터를 가져올 겁니다. 지금 현재 우리가 쓰고 있는 자바스크립트이기 때문에, 어떤 문서에서 무엇을 어떻게 가져올 것인지 상세하게 작성해줘야 합니다. 물론 변수를 넣어줘서요. 변수 이름은 누구나 알아볼 수 있도록 작성해 줍니다.
"이 변수에 넣어줄게" "뭘?" "문서(html)에 있는, Id를 말이야 네가 설정했던 "childID"중에 데이터들;
let childID = document.getElementById('childID').value;
"그리고 새창을 띄어줄게. 문서에 있는 requestid라는 요소의 데이터들을. childID에 담아서, "
opener.document.getElementById('requestID').value = childID;
그럼 여기서 requestid라는 것이 갑자기 왜 튀어나왔지?라고 생각할 수 있는데요. 우리가 html에 작성할 때 body.onload 한 값이 있었는데요. 그때 사용했던 것이 requestid입니다. 결국. 위의 명령어들은 자식요소를 requestid에 담아, 부모 창에 띄어준 명령어들이 되는 거죠. 그래서 requestID에도 함수의 내용을 미리 입력해주어야 합니다.
function requestID() {
// 부모 창의 데이터를 가져온다.
// opener는 현재 창을 띄운 부모 창을 의미한다.
let parentID = opener.document.getElementById('parentID').value;
console.log(parentID);
// 부모 창에서 얻어온 데이터를 자식 창의 객체에 넣어준다.
document.getElementById('childID').value = parentID;
}
2. 창을 닫을 때, 부모 창으로 전달하기
이와 같은 방법으로 진행하겠습니다.
(1) sendID2라는 함수를 만들고, 부모 창으로 넘겨줄 자식 창의 데이터를 가져옵니다.
function sendID2() {
let childID = document.getElementById('childID').value;(2) 부모창으로 데이터를 내보낼 것입니다. 이때 openr를 사용해 줍니다.
opener.document.getElementById('requestID').value = childID;
2-1 주의 : getElementBy###과 getElementsByTagName() 함수의 차이
ID가 아닌, name 속성이나 tag 이름을 얻어오려면, id는 무조건 1개만 나올 수 있으므로, Element처럼 단수형을 사용하고, name 속성이나, tag는 같은 것이 여러 개 나올 수 있으므로, Elements처럼 복수형을 사용합니다. getElementByID() 함수 1개만 데이터를 얻어오기 때문에, 그냥 사용하면 되지만, getElementsByName(), getElementByTagName() 함수는 여러 개를 배열로 얻어오기 때문에, 그냥 사용하면 안 되고, 인덱스 번호를 지정해서 가져와야 합니다.
opener.document.getElementsByName('requestID')[0].value = childID;
opener.document.getElementsByTagName('input')[4].value = childID;
opener.document.getElementsByTagName('h1')[1].innerHTML = '<marquee style="color: red">' + childID + '</marquee>';
'JavaScript' 카테고리의 다른 글
| JavaScript : 문서의 탐색 = DOM 탐색 (0) | 2023.11.28 |
|---|---|
| JavaScript : 아이디 중복확인 (indexOF의 등장) (0) | 2023.11.27 |
| javaScript DOM 객체와 이벤트 처리(1) (0) | 2023.11.23 |
| JavaScript 기본개념(3) 상속과 상속의 실습예제 (0) | 2023.11.23 |
| JavaScript 기본개념(2) 연산자의 종류 (0) | 2023.11.23 |
댓글