Popup window DOM

제레미 키스의 "다이내믹한 웹 표준 사이트를 위한 DOM 스크립트"라는 책 내용 중 window.open()를 이용해 만드는 popup()함수를 만들어 실행하면서 의문이 시작됐습니다. 일단 popup() 함수를 한번 보겠습니다.

							function popUp (winURL) {
								window.open(winURL, "popup", "width=320, height=480");
							}							
						

참고로 www.w3schools.com - window.open() 페이지를 참조하면 좋겠습니다.

의문점

아래와 같이 3개의 link tag 3개를 가지고 팝업 윈도우를 띄워 보겠습니다.
개개의 link는 모두 다른 URL의 윈도우 팝업을 띄웁니다.

naver

florakid.nayana.com

florakid.nayana.com/florakid_lib/

각각의 링크를 클릭해서 팝업창을 열면 하나의 창에서 중첩되게 열립니다. 즉 팝업창은 하나만 뜨고 따로따로 새창이 뜨지 않습니다.


자 이제 팝업창을 띄울때 popup() 함수에 조정해서 함수내에 파라미터로 윈도우창의 이름을 넘길 수 있게끔 바꿔봅니다.
테스트를 위해 함수의 이름을 popup2()로 바꾸겠습니다. 2번째 파라미터는 winName으로 설정했습니다.
실제 함수를 호출할 때 인자값으로 window Name을 문자열 형식으로 넘겨 주게 됩니다.

naver_2

florakid.nayana.com_2

florakid.nayana.com/florakid_lib/_2

							function popUp2 (winURL, winName) {
								window.open(winURL, winName, "width=320, height=480");
							}							
						

링크를 확인해 보면 윈도우 Name 값을 달리 주면 각각의 팝업창이 뜨는 것을 확인할 수 있습니다.
윈도우 name은 각 윈도우 창 개체를 다르게 인식하게 하는 값이 됩니다.

위 책의 내용을 보게 되면, a link 에 class값 popup을 설정하여 a.popup이라는 대상 객체를 popup함수에 연결하는 코드를 보게 되는데요. 그렇게 했을 때 모든 팝업창이 하나만 뜨는 것을 추측해 볼 수 있습니다. 한번 따라 해 보겠습니다.
소스는 아래와 같습니다.

							function popUp (winURL) {
								window.open(winURL, "popup", "width=320, height=480");
							}
							window.onload = prepareLinks;
							function prepareLinks () {
								var links = document.getElementsByTagName("a");
								for (var i=0; i<links.length; i++) {
									if (links[i].className == "popup") {
										links[i].onclick = function () {
											popUp(this.getAttribute("href"));
											return false;
										}
									}
								}
							}					
						

위 소스를 적용하기 위해서 아래의 a link 들에 모두 class="popup"을 추가 했습니다.
소스의 내용을 보면 a link들 중에 class의 값이 "popup"인 경우만 적용됩니다.


실제 적용된 링크를 클릭해 보면 첫 번째 경우 처럼 동일한 창에 중첩되어 다른 주소의 팝업이 열리는 것을 확인할 수 있습니다.
두 번재 경우처럼 팝업창이 따로 뜨게 하는 방법은 없을까요?
window의 name 값을 따로 준다면 아마 따로 따로 뜰것 입니다. 위의 소스를 다시 한번 수정해 보도록 하겠습니다.
popUp2 함수를 이용해서 변형해 보도록 하겠습니다.