JavaScript window.open() 여러 팝업창(멀티 팝업창) 소환

자바의 함수로 window.open()이 있다.

이를 사용하면 팝업창 형식으로 새 창이 소환 되는데, 한 가지를 간과하고 하나의 html에서 여러 window.open()을 사용하면 새 창들이 뜨지 않고 하나의 팝업창 속에서 그 여러 창들이 소환 되는 것이다.

 

그 한 가지는 바로,

window.open() 속성 中 이름 지정이다.

window.open(URL,이름,크기,위치,기타 등 등)으로 그 속성이 이루어져 있는데, 이 中 이름을 같은 것으로 지정하게 되면 하나의 팝업창 속에서 번갈아서 소환된다.

만약 다중 팝업 창을 구현 하고 싶다면,

ex)window.open(‘URL’,‘zelaw’), window.open(‘URL’,‘zelaw2’) 이렇게 이름을 달리하면 간단하게 해결 할 수 있다. 이에 대해 다음 tip에 물어보니 브라우저 속성창에 대한 답변이 많던데, 혹 모르는 분들이 있을까 염려 되어 작성 해 본다.

 

여기에서 재미있는 기능을 더 알려주자면,

document.write()와 함께 사용하면 리프레쉬 없이 하나의 창에 여러 팝업 객체들이 연달아 소환된다는 것이다. 지난 번에 iframe을 이용 유튜브 플레이어를 작성 한 적이 있는데, window.open()을 실행하는 버튼을 여러 번 누르니 하나의 팝업 창에 여러 플레이어들이 줄줄히 소환되었다.

대략적으로 코드를 치자면,

 

var win=window.open();

win.document.write();

 

이런 느낌으로 작성하였다. 하나의 팝업창에서 여러 유튜브 플레이어를 소환하기 싫고 여러 창안의 플레이어를 소환하고 싶다면, 위에서 언급 하였듯이 window.open() 속성에 이름만 바꿔주면 된다.

 

그 예시들은 오른쪽 하단의 오로치마루 주위에 있는 버튼들을 눌러보면 알 수 있다.

그 中 몇 개는 location을 이용 하여 새 창(팝업창)이 아닌 지역 창에서 소환하도록 만들어 놓았다. 물론 a 태그를 이용하여 구현 해도 되지만 밑줄 같은 것이 생겨 이질적으로 다가오기에 버튼으로 구성 해 놓았다. 애니메이션, TV, 웹툰/만화의 각 part에 있는 검색 기능을 써봐도 알 수 있다.