Как добавить target = "_ blank" в ссылку в указанном div?

Скажем, у меня есть следующий код:

<div id="link_other">
    <ul>
        <li><a href="#" onclick="location.href='http://www.google.com/'; return false;">google</a></li>
        <li>
            <div class="some_class">
                dsalkfnm sladkfm
                <a href="#" onclick="location.href='http://www.yahoo.com/'; return false;">yahoo</a>
            </div>
        </li>
    </ul>
</div>

В этом случае JavaScript добавит target="_blank" ко всем ссылкам в div link_other.

Как это сделать с помощью JavaScript?

Ответ 1

/* here are two different ways to do this */
//using jquery:
$(document).ready(function(){
  $('#link_other a').attr('target', '_blank');
});

// not using jquery
window.onload = function(){
  var anchors = document.getElementById('link_other').getElementsByTagName('a');
  for (var i=0; i<anchors.length; i++){
    anchors[i].setAttribute('target', '_blank');
  }
}
// jquery is prettier. :-)

Вы также можете добавить тег заголовка, чтобы уведомить пользователя о том, что вы делаете это, чтобы предупредить их, поскольку, как было указано, это не то, что ожидают пользователи:

$('#link_other a').attr('target', '_blank').attr('title','This link will open in a new window.');

Ответ 2

Non-JQuery:

// Very old browsers
// var linkList = document.getElementById('link_other').getElementsByTagName('a');

// New browsers (IE8+)
var linkList = document.querySelectorAll('#link_other a');

for(var i in linkList){
 linkList[i].setAttribute('target', '_blank');
}

Ответ 3

Имейте в виду, что это считается плохой практикой в целом веб-разработчиков и экспертов по юзабилити. Якоб Нильсон говорит об удалении контроля над просмотром пользователей:

Избегайте нереста нескольких окон браузера, если это вообще возможно - удаление кнопки "Назад" от пользователей может сделать их опыт настолько болезненным, что он обычно намного превосходит любую выгоду, которую вы пытаетесь предоставить. Одна общая теория в пользу создания второго окна заключается в том, что он заставляет пользователей покидать ваш сайт, но по иронии судьбы он может иметь только противоположный эффект, не позволяя им вернуться, когда захочет.

Я считаю, что это аргумент в пользу того, что атрибут target удаляется W3C из спецификации XHTML 1.1.

Если вы настроены на такой подход, решение Pim Jager хорошее.

Более приятная, удобная для пользователя идея - добавить графику ко всем вашим внешним ссылкам, указав пользователю, что после ссылки они будут извлекать их извне.

Вы можете сделать это с помощью jquery:

$('a[href^="http://"]').each(function() {
    $('<img width="10px" height="10px" src="/images/skin/external.png" alt="External Link" />').appendTo(this)

});

Ответ 4

Использование jQuery:

 $('#link_other a').each(function(){
  $(this).attr('target', '_BLANK');
 });

Ответ 5

Я использую это для каждой внешней ссылки:

window.onload = function(){
  var anchors = document.getElementsByTagName('a');
  for (var i=0; i<anchors.length; i++){
    if (anchors[i].hostname != window.location.hostname) {
        anchors[i].setAttribute('target', '_blank');
    }
  }
}

Ответ 6

Инлайн:

$('#link_other').find('a').attr('target','_blank');

Ответ 7

Используйте это для каждой внешней ссылки

$('a[href^="http://"], a[href^="https://"]').attr('target', '_blank');

Ответ 8

Решение soft0nic сработало для меня. Так как я был рад за все на странице, чтобы открыть в новом окне.

window.onload = function(){
  var anchors = document.getElementsByTagName('a');
  for (var i=0; i<anchors.length; i++){
    if (anchors[i].hostname != window.location.hostname) {
        anchors[i].setAttribute('target', '_blank');
    }
  }
}