Html & Script

[자바스크립트 팁] 링크 총정리(점선없애기,주소 감추기,this,event사용주의)

페이지 정보

본문


http://home.hanmir.com/~epjang



그동안 책이나 계시판, 제 경험에 의한 동작을 한 자리에 모아봤읍니다.

[점선없애기]===================================================================

익스플로러에서는 this.blur()나 hidefocus를 이용합니다.

  <a href="javascript:void(0)" onclick="this.blur()"> 점선없음 </a>
  <a href="javascript:void(0)" hidefocus="true"> 점선없음 </a>

스크립트를 작성할때는 hidefocus가 유용합니다.

이전 링크의 onblur 핸들러에 등록된 명령어나 함수가 덮어쓰여질 위험이 없기 때문입니다.

  <div id="dotNo">
        <a href="javascript:void(0)">링크</a> <a href="javascript:void(0)">링크</a>
    </div>
  <script>
      var objArea = document.getElementById('dotNo');
      var objLinks = objArea.getElementsByTagName('a');

      for(var i=0; i<objLinks.length; i++)
      {
          objLinks.item(i).hideFocus = function(){return true;}; // hideFocus대소문자 주의!!
      }
 
      /*
      objLinks.item(i).onblur = function(){return false;}; 는 기존의 링크 onblur에 등록된
      명령어와 함수를 덮어쓰므로 추천하지 않습니다.
      */
  </script>

넷스케이프에서는 hidefocus는 지원되지 않으며 blur()는 폼요소에만 적용되는 것
같읍니다.

따라서 보이지 않는 폼요소 hidden을 이용하여 포커스를 이동시킵니다.
익스플로러에는 보이지 않는 폼요소에 포커스를 줄 경우 런타임에러를
발생시킴으로 사용할 수 없읍니다.

<!-- 넷스케이프 전용-->
<div id="noDot">
  <a href="javascript:void(0)"> 점선없음</a>
  <a href="javascript:void(0)"> 점선없음</a>
</div>

<input type="hidden" id="elm" /> <!-- 보이지 않는 요소 -->
<script>
  var objArea = document.getElementById('noDot');
      objArea.onclick = function(){document.getElementById('elm').focus();}

</script>


[javascript: event,this는 사용할 수 없습니다.]====================================

  javascript: 프로토콜과 onXXX 이벤트핸드러는 모두 명령어을 실행하지만
  this, event는 프로토콜에서 사용할 수 없습니다.

      this는 a 요소가 아닌 현재 페이지의 window개체를 가리킵니다.
        <a href="javascript:alert(this==window)">클릭</a>

      이벤트 개체는 null로 나타납니다.
        <a href="javascript:alert(event)">클릭</a>


  this, event를 사용하려면 반드시 이벤트 핸들러 onXXX를 이용해야 합니다.

[ 주소 감추기]========================================
  완전하게 주소를 감춘다는 건 불가능합니다.
  다만 일반사용자분들의 링크방지를 위해 감추어 둘 뿐이겠죠.

  - 팝업창의 F11 기능 막기

      <script>
      document.onkeydown = function()
      {
          event.keyCode = 0; // 핵심!
          return false;
      }
    </script> 

  - 상태바에 주소 감추기

      <a href="http://www.phpschool.com" onmouseover="return true">주소감춤</a>
      <a href="http://www.phpschool.com" onmouseover="window.status='PHP스쿨';return true" onmouseout="window.status=''">주소 감추고 글자로 대신하기</a>

    - 항상 주소 감추기

    위의 onmouseover="return true"는 클릭시에는 주소가 상태바에 나타납니다.
    모든 상황에서 주소바가 나타나지 않으려면 (잠깐은 보였다 사라집니다.)
    아래 코드를 이용하세요

    그러나 계속 함수호출이 일어나므로 페이지 분량이 많다면 속도를 저하시킬 수 있으므로
    주의해서 사용하셔야 합니다.(비추천)

      <a href="http://www.phpschool.com">주소감춤</a>
      <a href="http://www.phpschool.com">주소감춤</a>

      <script>
      setInterval('window.status=""',5);
      </script>

관련자료

등록된 댓글이 없습니다.
Today's proverb
유쾌한 사람은 자기 일에만 몰두하는 사람이 아니다. 때론 자신의 일을 전부 제쳐놓고 타인의 문제에 전력을 쏟는 열정이 있는 사람이다. 타인에게 자신의 힘을 나누어주고 마음을 열어주는 것은 자신의 삶을 행복하게 만드는 방법이다.