글 수 300
2006.10.31 09:52:35 (*.105.128.194)
17315
웹서핑을 하다보면 사이트 첫페이지나 중간 중간에 작은 창을 이용하여 공지사항을 달아놓은 것을 많이 보았을 것입니다. 이해가 안되시면 여기를 한번 눌러보세요^^ 이러한 것은 자바스크립트를 이용한 브라우져 조절 기능인데.......알고 있으면 아주 유용하게 사용할 수 있습니다. 눈 크게 뜨고 잘 보세요.
※ 참고적으로 yes의 경우 표시,출력,크기조정 가능.....no의 경우 표시, 출력, 크기조정 불가를 나타냅니다.
기본적으로 이 기능을 사용할 때는 자바스크립트의 window.open 을 사용합니다.
상황 | 소스 |
자동 팝업시 | <script>window.open('원하는 웹페이지주소','...','....','.....')</script> |
클릭 팝업시 | <a href="#" onclick="window.open('원하는 웹페이지주소','...','...')">클릭</a> |
일반적으로 우리가 새창을 띄울때는 위의 두가지 경우가 대부분입니다. 설명해놨듯이 "자동팝업시"란 웹페이지가 로딩되면서 바로 새로운 창이 생기는 것을 말하며, 클릭 팝업시란 링크된 부분을 클릭해야 만히 새창이 뜨는 것을 말합니다. 소스의 중간에 '...','...' <--이런 부분에 바로 브라우져창을 조절하는 속성이 들어가게 된다. 그러면 그 속성들을 알아보도록 하죠^^
menubar=yes/no | 윈도우의 menubar 표시여부 |
directories=yes/no | 윈도우의 directory button들의 출력여부 |
location=yes/no | 윈도우의 location box 표시여부 |
status yes/no | 윈도우의 상태표시줄 표시여부 |
toolbar=yes/no | 윈도우의 toolbar 표시여부 |
scrollbars=yes/no | 윈도우의 가로 세로 scrollbar 표시여부 |
resizable=yes/no | 윈도우의 크기가 조정될 수 있는 지 결정 |
width=수치 | 윈도우의 너비 결정 |
height=수치 | 윈도우의 높이 결정 |
top=수치 | 윈도우의 위치조절(화면 상단으로 부터 간격 조정) |
left=수치 | 윈도우의 위치 조절(화면 왼쪽으로 부터 간격 조정) |
※ 참고적으로 yes의 경우 표시,출력,크기조정 가능.....no의 경우 표시, 출력, 크기조정 불가를 나타냅니다.
예를 들어 소스를 만들어 보죠^^
클릭시 | <a href="#" onClick="window.open('banner.htm','_blank','toolbar=no,location=no,status=no,menubar=no, scrollbars=auto,resizable=no,width=424,height=219 top=10 left=10')">클릭</a> |
자동팝업시 | <Script>window.open("banner.htm",'_blank','toolbar=no,location=no,status=no,menubar=no, scrollbars=auto,resizable=no,width=424,height=219 top=10 left=10')</script> |
※ 주의점 - 위에 소스를 적을 때 "" 쌍따옴표 사이에 공란이 있으면 안되고요........초보분들은 될 수 있으면 한줄로 사용하세요.^^ 그리고 웹페이지 주소 다음에 _blank 부분은 name 설정이 들어가는 부분입니다. 원하는 창의 네임을 지정해주고 그 네임으로 팝업을 하면 해당 팝업창에 주소부분의 웹페이지가 뜨게 되는 거죠.
하핫^^ 세상에는 꼭 남들과 반대로 가고 싶어하는 사람들이 소수(?) 있습니다. 즉, 자기는 FM을 추구한다 하시는 분들, 조금 더 어렵게 사용하고 싶다하는 분들, 남들과는 차별되고 싶다하시는 분들은 아래 소스를 사용하세요^^
<script language="javascript"> function OpenAnotherWin(szhref){ AnotherWin = window.open(szhref,"AnotherWin", "toolbar=yes,location=yes,directories=yes, status=yes,menubar=yes,scrollbars=yes, resizable=yes,width=300,height=300"); } </script> |
단, 위의 소스를 <head></haed> 사이에 넣고 <body onLoad='OpenAnotherWin("이동할 웹페이지주소")'> 를 반드시 넣기를 바랍니다.^^