it-swarm.com.de

Wie füge ich einem Link innerhalb eines angegebenen Divs target = "_ blank" hinzu?

Nehmen wir an, 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 fügt das JavaScript allen Links innerhalb des div target="_blank"link_other hinzu.

Wie mache ich das mit JavaScript?

58
kakkalo
/* 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 ein Titel-Tag hinzufügen, um den Benutzer darüber zu informieren, dass Sie dies tun, und ihn zu warnen, denn wie bereits erwähnt, erwarten die Benutzer nicht:

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

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

Beachten Sie, dass dies von Webentwicklern und Usability-Experten generell als schlechte Praxis betrachtet wird. Jakob Nielson sagt dazu, dass Sie die Kontrolle über das Benutzererlebnis der Benutzer aufheben müssen:

Vermeiden Sie es, mehrere Browserfenster zu starten, wenn dies überhaupt möglich ist. Wenn Sie die Schaltfläche "Zurück" vom Benutzer entfernen, kann dies die Erfahrung so schmerzhaft machen, dass der Nutzen, den Sie erzielen möchten, bei weitem überwiegt. Eine verbreitete Theorie für das Auftauchen des zweiten Fensters lautet, dass Benutzer davon abgehalten werden, Ihre Website zu verlassen. Ironischerweise kann dies jedoch genau das Gegenteil bewirken, indem sie verhindern, dass sie zurückkehren, wenn sie möchten.

Ich glaube, dies ist der Grund dafür, dass das Zielattribut vom W3C aus der XHTML 1.1-Spezifikation entfernt wird.

Wenn Sie bereit sind, diesen Ansatz zu verfolgen, ist die Lösung von Pim Jager gut.

Eine schönere und benutzerfreundlichere Idee wäre, eine Grafik an alle externen Links anzuhängen, die den Benutzer darauf hinweisen, dass das Folgen des Links die Links nach außen führt. 

Sie könnten dies mit jquery tun:

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

});
6
Bayard Randel

JQuery verwenden:

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

Ich verwende das 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');
    }
  }
}
3
soft0nic

In der Reihe:

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

Verwenden Sie dies für jeden externen Link

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