JQuery класс внешних ссылок

Question

Я добавил следующее на один из наших сайтов, чтобы рядом с внешними ссылками отображался значок внешней ссылки:

$(document).ready(function() {
  $('#extlinks a').filter(function() {
 return this.hostname && this.hostname !== location.hostname;
  }).after(' <img src="/images/external.png" alt="external link"/>');
});

Мы используем Business Catalyst, и я надеюсь, что это не связано с настройкой их серверов, а с удалением www из URL ВСЕ ссылки отображаются как внешние.

Вот пример: http://noosabiosphere.org.au/_blog/Environment_Blog

Спасибо.

Answer 1

Похоже, ссылки пишутся на странице с www. впереди, не относительные ссылки.

this.hostname !== location.hostname

возвращает истину.

Answer 2

Используя приведенный ниже код, вы можете найти внешние ссылки, используя $('a:external');

(function($) {
$.extend($.expr[':'], {
    external: function(o) {
        return o.hostname !== window.location.hostname && o.hostname;
    }
});
$.fn.external = function() {
    return this.filter(':external');
};
}(this.jQuery));

Что касается ссылок, начинающихся с протокола (http://), вы все равно должны сделать это для всех внешних ссылок, в противном случае большинство браузеров будут рассматривать его как внутреннюю ссылку и добавлять имя домена.

Answer 3

Пожалуйста, убедитесь, что ссылки начинаются с http: // Я проверил это со следующими ссылками:

<ul style="list-style:none none outside;">
    <li><a href="http://www.google.com">Google</a></li>
    <li><a href="http://localhost/EnterKey.html">Enter Key</a></li>
    <li><a href="www.microsoft.com">Microsoft</a></li>
    <li><a href="http://stackoverflow.com/questions/">SO</a></li>
</ul>

<script type="text/javascript">
$(function(){
 $("a").filter(function(){
  return this.hostname && this.hostname !== location.hostname;
 }).after("<img src='/images/extlink.gif'/>");
});
</script>

Только первая (Google) и последняя (SO) ссылки показывают изображение, а не три (MS).