[설문조사 사이트 테스트]
이름 :
점넷(.Net)
분류 전체보기 (176)
점넷공간 (38)
COMPUTER (1)
.NET (29)
DB (36)
SCRIPT (3)
MarkUp & CSS (3)
OS (7)
IT Story (52)
Information (7)
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Visitors up to today!
Today hit, Yesterday hit
daisy rss
tistory 티스토리 가입하기!
2008. 2. 2. 10:53
아래 코드는 현재 블로그에서 적용되고있는 스크립트입니다.
왜 이스크립트를 사용했냐면.. 귀차니즘때문에..ㅋㅋ^^
문제가 뭐였냐면 글을 작성하다보면 링크항목이 몇개씩 있습니다.
기본으로 "_self" 형태로 링크가되어있어 사용자는 링크확인후 뒤로가기로 페이지를 돌아와야 했습니다.
그렇다고 매번 링크에 target을 "_blank"로 변경해주는것도 한두번이지 많은 링크가 있을땐 어이쿠....

그리하여 document.links로 링크객체들의 타겟속성을 "_blank"로 변경해주었더니
링크가 되는 부분은 전부 새창으로 뜨면서(관리자모드까지..) 더불편해지더라구요
그리하여 내린 대책이 특정영역의 특정태그에 대해서 속성을 변경하면 좋겠다고 생각을 했습니다.

분문에 해당하는 div태그에 id를 "mcontents"
로 설정해주고 해당영역에 존재하는  <a>태그들에게 타겟을 새창뜨기로 변경하였더니 본문에 해당하는 링크항목(<a>)만 새창으로 활성화가 되더라구요^^
저와 같은 고민을 하고 계시는 분은 한번적용시켜보세요^^

function setTarget()
{
  // id가 'mcontents'인 영역안의 'a'태그의 항목을 가져와서 속성을 변경
  for(var i=0; i<document.getElementById("mcontents").getElementsByTagName("A").length; i++)
  {
    document.getElementById("mcontents").getElementsByTagName("A")[i].target = "_blank";
  }
}


이번 설정으로 링크 목록의 정보를 가져오는 예제도 한번 만들어 보았습니다.
소스코드는 http://www.koxo.com 사이트에서 참조하였구요(레이아웃 잡는게 귀찮아서;;)
예제는 문서의 모든영역의 링크속성정보 혹은 특정 영역의 특정태그에 대한 속성정보를 보여주는 예제입니다.
특정영역의 특정태그는 위에서 사용했던 "sample" 영역의 <A> 태그만 적용하겠습니다.
(약간만 수정하면 여러형태고 사용이 가능합니다. ^^)
소스코드 아래 샘플도 있으니 확인해보시면 더욱 좋습니다.

<script type="text/javascript" language="javascript">

// 전체 항목에 있는 링크목록 보여주는 함수

function showAll()

{

  ShowInfo(document.links);

}

// 특정영역에 있는 특정태그 목록을 보여주는 함수(여기서는 A 태그만 사용)

function targetAll()

{

    ShowInfo(document.getElementById("sample").getElementsByTagName("A"));

}

// 특정 오브젝트를 받아서 해당 오브젝트의 정보를 보여주는 함수

function ShowInfo(obj)

{

  // 창단기 문자열을 변수로 만든다.

  closeStr='<SPAN style="border:solid 1 gray;padding:3;background:ffa;float:right;cursor:hand" ';

  closeStr+='onClick=self.close()>창닫기</SPAN>';

  // 테이블을 시작한다.

  str=closeStr+'<TABLE border=1 cellpadding=1 cellspacing=0 width=100% align=center>';

  // 테이블 제목을 넣는다.

  str+='<TR bgcolor=eeeeee><TH>#</TH><TH>protocol</TH><TH>href</TH>';

  str+='<TH>hash</TH><TH>target</TH><TH>host</TH></TR>';

 

  // 출력할 윈도우를 열고 이름(newWin)을 부여한다.

  newWin=window.open('','newWin','width=900,height=500,top=100,left=50,toolbars=no,scrollbars=yes');

 

  // 연결 배열변수 길이만큼 반복하는 루프를 시작한다.

  for (numb=0;numb<obj.length;numb++){

    // 번호를 넣는다.

    str+='<TR><TD>links['+numb+']</TD>';

    // 프로토콜을 넣는다.

    str+='<TD>'+(obj[numb].protocol?obj[numb].protocol:'&nbsp;')+'</TD>';

    // 각각 삼항식으로 빈칸이면 공백문자(&nbsp;)를 넣는다.

   

    // 연결주소를 넣는다.

    str+='<TD>'+(obj[numb].href?obj[numb].href:'&nbsp;')+'</TD>';

    // 부위지정자를 넣는다.

    str+='<TD>'+(obj[numb].hash?obj[numb].hash:'&nbsp;')+'</TD>';

    // 중복성이므로 생략한다.

//    str+='<TD>'+(obj[numb].search?obj[numb].search:' ')+'</TD>';

    // 목표 프레임을 넣는다.

    str+='<TD>'+(obj[numb].target?obj[numb].target:'&nbsp;')+'</TD>';

    // 호스트를 넣는다.

    str+='<TD>'+(obj[numb].host?obj[numb].host:'&nbsp;')+'</TD>';

    // 중복성이므로 생략한다.

//    str+='<TD>'+(obj[numb].pathname?obj[numb].pathname:' ')+'</TD>';

    str+='</TR>'; // 테이블 한줄을 닫는다.

  } // 루프를 종료한다.

 

 

  str+='</TABLE>'+closeStr; // 테이블을 닫는다.

  newWin.document.write(str); // 결과를 보조창에 출력한다.

}

</script>


 

<div class="show" title="결과">

<input type="button" value="문서내 모든 링크정보 보기" onclick="showAll()" />

<input type="button" value="특정 영역 링크정보 보기" onclick="targetAll()" />

</div>

<div id="sample">

<a href="http://www.naver.com" target="_blank">네이버</a>

</div>

<div>

<a href="http://www.daum.net" target="_top">다음</a>

</div>



다음

━━━━━━━━━━━━━━━
by 한상국(han3925)
MAIL  han3925@gmail.com
         han3925@hotmail.com
BLOG pointnet.tistory.com
━━━━━━━━━━━━━━━