كيف يمكنني إضافة الهدف = "_ فارغة" إلى ارتباط داخل شعبة محدد؟

Question

ودعونا نقول لدي البرمجية التالية:

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

في هذه الحالة، فإن جافا سكريبت إضافة target="_blank" لجميع الروابط داخل link_other شعبة.

وكيف يمكنني أن أفعل ذلك باستخدام جافا سكريبت؟

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

ويمكنك أيضا إضافة علامة لقب لإعلام المستخدم أن كنت تفعل هذا، لتحذيرهم، لأنه كما تمت الإشارة إلى ذلك، انها ليست ما يتوقعه المستخدمين:

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

Answer 2

وغير مسج:

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

ونضع في اعتبارنا أن تفعل هذا يعتبر ممارسة سيئة بشكل عام من قبل مطوري الويب والخبراء سهولة الاستخدام. جاكوب نيلسون وهذا القول حول إزالة السيطرة على المستخدمين تجربة التصفح:

<اقتباس فقرة>   

وتجنب وضع البيض متعددة نوافذ المتصفح إذا كان ذلك ممكنا - اتخاذ زر "رجوع" بعيدا عن المستخدمين يمكن أن تجعل تجربتهم المؤلمة بحيث عادة ما يفوق بكثير كل ما فائدة كنت تحاول تقديم. نظرية واحدة مشتركة لصالح وضع البيض النافذة الثانية هي أنه يبقي المستخدمين من مغادرة موقعك، ولكن من المفارقات أنه قد يكون مجرد أثر عكسي من خلال منعهم من العودة عندما يريدون.

وأعتقد أن هذا هو الأساس المنطقي للسمة الهدف يتم إزالتها من قبل W3C من المواصفات XHTML 1.1.

إذا كنت متصلبا على اتخاذ هذا النهج، حل بيم ياخر هو جيد.

وA، المزيد من فكرة سهلة الاستعمال أجمل، سيكون لإلحاق الرسم لجميع الروابط الخارجية الخاص، مشيرا إلى أن المستخدم بعد وصلة سيأخذهم خارجيا.

هل يمكن أن تفعل هذا مع مسج:

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

});

Answer 4

وعن طريق مسج:

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

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

Answer 6

ومضمن:

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

Answer 7

استخدم هذا لكل رابط خارجي

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