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

Question

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

Допустим у меня есть следующий код:

<div id="link_other">

    <ul>

        <li><a href="http://www.google.com/">google</a></li>

        <li>

            <div class="some_class">

                dsalkfnm sladkfm

                <a href="http://www.yahoo.com/">yahoo</a>

            </div>

        </li>

    </ul>

</div>

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

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

595 7

javascript hyperlink external-links

7 ответов:

Comments

Ничего не найдено.

artlung · Accepted Answer · 2009-04-30 00:28:22

/* 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.');

Mike Robinson · Accepted Answer · 2014-09-02 19:14:10

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');
}

Bayard Randel · Accepted Answer · 2009-04-30 00:36:21

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

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

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

Если вы твердо настроены на этот подход, решение Пима Ягера хорошо.

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

вы можете сделать это с помощью jQuery:
$('a[href^="http://"]').each(function() {
    $('<img width="10px" height="10px" src="/images/skin/external.png" alt="External Link" />').appendTo(this)

});

Pim Jager · Accepted Answer · 2016-12-19 10:16:59

С помощью jQuery:

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

soft0nic · Accepted Answer · 2014-03-15 17:09:24

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

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');
    }
  }
}

cfree · Accepted Answer · 2010-03-16 22:17:47

Inline:

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

gidzior · Accepted Answer · 2013-09-24 15:39:43

используйте это для каждой внешней ссылки
$('a[href^="http://"], a[href^="https://"]').attr('target', '_blank');