jQuery) 새 창에서 외부 링크 열기

홈페지를 만들 때 당연히 _self로 링크를 했었다. _blank로 하면 매번 새창이 뜨고 지저분해졌기 때문이다. 그리고 항상 내 홈페이지를 만들어서 보이는것만 했었기 때문에 다른것을 신경쓰지 않았었는데, 책을 보니 링크에 대해서 자세히 설명되어있었다.
만약에 내 홈페이지를 보던사람이 다른 사이트를 눌렀을때 내 홈페이지가 사라지고 다른것을 띄우게 된다면 내 홈페이지를 보던 중요한 사람이 사라지게 되는 것이다. 그렇기 때문에 방문객들을 다른 사이트로 보내지 않고, 자신의 사이트에 잡아 두기 위해 외부 홈페이지의 주소로 링크가 이어질 경우에는 target을 _blank로 하는 것이 좋다.
그런데 일일이 링크마다 target을 정해주는 것 대신 jQuery를 이용해서 링크들을 관리하는 좋은 방법이 있다.

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() {     var myURL = location.protocol + '//' + location.hostname;     $('a[href^=href://]').not('[href^='+myURL+']').attr('target','_blank'); }); </script>

우선 사이트의 URL을 알아낸 뒤 myURL이라는 변수에 저장한다. URL은 브라우저의 window 객체를 사용해서 알아낸다. 브라우저는 URL에 접속 하기 위해 사용한 프로토콜이 http:인지 https:인지 location 객체의 protocol이라는 속성에 저장한다. 마찬가지고, www.naver.com 과 같은 사이트의 이름은 hostname 속성에 저장한다. 따라서, 자바스크립트 코드 location.protocol + '//' + location.hostname은 http://www.naver.com과 같은 문자열을 생성한다.
jQuery 선택자 $('a[href^=href://]')에서는 http://로 시작하는 링크를 포함한 <a> 태그를 찾기 위해 속성 선택자를 사용하였다. 그리고는 not() 함수를 사용해서 현재 사이트의 URL로 시작하는 링크는 제외하고, jQuery의 attr()함수를 사용해서 각각의 링크의 target 속성에 _blank라는 값을 설정한다.



* 또 다른 방법으로는 외부 자바스크립트 파일을 만들고, 그 파일 안에 외부 링크를 새 창으로 여는 코드가 포함된 함수를 만드는 방법도 있다. 그리고 만든 외부 파일을 페이지에 추가하고 함수를 호출하는것이다.