[jQuery] 새 창에서 링크 열기

링크를 새로운 창이나 탭에서 실행되도록 하려면 html 태그에서 target="_blank"를 추가해야 합니다. 직접 소스를 수정하지 않으려면 jQuery를 사용할 수 있습니다.

먼저는 attr 메소드를 사용하여 target="_blank"를 추가하는 방법을 생각해볼 수 있습니다.

$(document).ready(function(){
$("a[href^='http']").attr('target','_blank');
});

위와 같이 사용하면 모든 링크가 새 창에서 실행될 것입니다(참고). 클래스를 구체적으로 지정해줄 수 있습니다.

$(document).ready(function() {
$("class name").attr({"target" : "_blank"})
})

클래스는 .class_name, id는 #id_name이 되겠죠(기본적인 CSS).

또 다른 방법으로 window.open을 사용할 수 있습니다.

$(document).ready(function(){
$('.class_name').click(function(){
window.open(this.href);
return false;
});
});

특정 url에만 적용하려면 다음과 같이 사용하면 됩니다.

$(document).ready(function(){
$('a[href=http://www.google.com]').click(function(){
window.open(this.href);
return false;
});
});
// Source: http://befused.com/

그러면 www.google.com이 있는 링크만 새 창에서 열립니다.

워드프레스의 댓글 내의 링크를 모두 새 창에서 열리도록 하려면 class 부분에 #comments a를 추가해주면 됩니다.

$(window).ready(function(){
//adds target blank to all comment links
$('#comments a').each(function(){
$(this).attr('target','_blank');
});
});
// Source: wordpress.org

댓글 내의 링크가 새 창에서 실행되도록 하는 방법은 여러 가지가 있습니다. 가령 후크를 사용하거나 플러그인을 사용할 수도 있습니다(여기 참고). jQuery를 사용하면 보다 간편하게, 별도의 플러그인 없이, 가능합니다. 참고로 워드프레스에서 jQuery를 사용하는 방법은 이 글을 확인해보시기 바랍니다.