웹서핑을 하다보면 사이트 첫페이지나 중간 중간에 작은 창을 이용하여 공지사항을 달아놓은 것을 많이 보았을 것입니다. 이해가 안되시면 여기를 한번 눌러보세요^^ 이러한 것은 자바스크립트를 이용한 브라우져 조절 기능인데.......알고 있으면 아주 유용하게 사용할 수 있습니다. 눈 크게 뜨고 잘 보세요.
기본적으로 이 기능을 사용할 때는 자바스크립트의 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("이동할 웹페이지주소")'> 를 반드시 넣기를 바랍니다.^^
本(헉.....한자당!) 페이지에서는 자바스크립트의 간단한 기능을 이용하여 아주 효율적인 효과를 나타낼 수 있는 방법을 알아보겠습니다. 웹서핑을 하다보면 버턴을 클릭하면 창이 자동으로 닫히거나 이전 페이지로 가기도 하고 앞 페이지로 가기도 하는 걸 많이 보았을 겁니다. 조금 더 응용해서 일정시간 후 자동으로 닫히는 걸 보고 나도 해보고 싶은 생각이 한번 쯤은 들었을 텐데.......여기서 아주 후련하게 그 궁금증을 해소시켜드리죠.
어려운 것 같지만 아주 간단합니다. 태그내에 자바스크립트를 몇 개만 적어 주시면 됩니다.
| 창닫기 버턴 | <input type="submit" value="창닫기" onclick="window.close()"> or ＜a href="#" onClick="parent.close()">창닫기</a> |
| 이전 페이지로 가기 | <input type="submit" value="이전" onclick="history.back()"> or ＜a href="#" onClick="history.back()">이전페이지로</a> |
| 앞 페이지로 가기 | <input type="submit" value="앞으로" onclick="history.forward()"> or ＜a href="#" onClick="history.forward()">앞 페이지로</a> |
| 새로 고침 | <input type="submit" value="새로고침" onclick='top.location!="javascript:location.reload()"'> or ＜a href="#"onClick='top.location!="javascript:location.reload()"'>새로고침 </a> |
한가지 주의할 점은 창닫기 버턴의 경우 가끔씩 "현재보고 있는 창을 닫으시겠습니까?" 라는 자바경고창이 뜨는 경우가 있는데 이 경우는 닫을 려고 하는 창이 새로운 창이 아나라 원래 부모창일 경우 나타나게 됩니다.
위에 설명한 것 하고는 차원이 다른데 비슷한 기능이기 때문에 소스를 하나 소개하겠습니다. 바로 일정시간 이후 자동으로 창이 닫히는 기능을 하는 자바스크립트입니다.
위에 소스를 <head>부분에 집어 넣으시고요.. <body> 부분에는 onLoad="startTime();" 넣는 거 잊지 마세요^^
'기타' 카테고리의 다른 글
| [스크랩] 맨유vs토트넘 (EPL 4R), 나니골 포함 전후반 하이라이트 (0) | 2007.08.27 |
|---|---|
| [스크랩] [맨유VS토트넘] 나니 선제 결승골(8월 27일) (0) | 2007.08.27 |
| 브라질vs영국 (0) | 2007.06.03 |
| ac밀란 vs 리버풀 하이라이트 (0) | 2007.05.24 |
| 인자기 골장면 (0) | 2007.05.24 |