Wie füge ich target = „_ blank“ auf einen Link innerhalb einer bestimmten div?

Question

Lassen Sie uns sagen, ich habe den folgenden Code:

<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>

In diesem Fall wird die JavaScript würde target="_blank" für alle Links innerhalb des div link_other hinzuzufügen.

Wie kann ich tun, dass mit Hilfe von JavaScript?

Answer 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. :-)

Sie können auch einen Titel-Tag hinzufügen, um den Benutzer zu benachrichtigen, dass Sie dies tun, um sie zu warnen, denn wie erwähnt wurde, ist es nicht, was die Nutzer erwarten:

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

Answer 2

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

Answer 3

im Allgemeinen schlechte Praxis betrachtet wird durch Web-Entwickler und Usability-Experten

Beachten Sie, dass dies zu tun. Jakob Nielsen hat diese Kontrolle über die Nutzer zu sagen über Erfahrung Surfen Entfernung:

  

Vermeiden Sie mehrere Browser-Fenster Laichen, wenn überhaupt möglich - die Schaltfläche „Zurück“ weg von Nutzer, die ihre Erfahrungen so schmerzhaft, dass es in der Regel überwiegt bei weitem alles, was Nutzen Sie versuchen bieten zu. Eine gemeinsame Theorie für das zweite Fenster Laichen ist, dass es die Nutzer daran hindert Ihre Website zu verlassen, aber ironischerweise kann es haben gerade die entgegengesetzte Wirkung, indem sie verhindert, dass zurückkehrt, wenn sie wollen.

Ich glaube, dass dies der Grund für das Zielattribut ist durch das W3C von der XHTML 1.1 Spezifikation entfernt werden.

Wenn Sie den Kopf gesetzt sind, diesen Ansatz auf Einnahme, Pim Jager-Lösung ist gut.

Eine schöne, benutzerfreundliche Idee, wäre eine Grafik, um all Ihre externen Links anhänge, den Benutzer anzeigt, dass der Link folgenden wird sie von außen nehmen.

Sie können dies tun, mit jquery:

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

});

Answer 4

Mit jQuery:

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

Answer 5

Ich benutze dies für jeden externen Link:

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

Answer 6

Inline:

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

Answer 7

Verwenden Sie diese für jeden externen Link

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