Как открыть все внешние ссылки в новом окне (javascript) (страница комментариев 5)

15 октября 2012. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

Открыть иль не открыть — вот в чём вопрос…

Вы ведёте блог? Ставите ссылки на другие сайты? Если «да» и «да», то в каком окне/вкладке вы их открываете — в том же или в новом? 99,(9)% вебмастеров открывают внешние ссылки в новом окне (а некоторые открывают в новом даже ссылки на самого себя — что, с моей точки зрения, явный перебор). Ничтожно малое исключение составляют особо принципиальные.

[expand]

Отступление об особо принципиальных. Читать полностью »

Отзывы (81) на «Как открыть все внешние ссылки в новом окне (javascript)»
  1. Аноним

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

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      Ваш вопрос невозможно понять, извините.

      Ответить на этот комментарий
  2. Александр (4 комментария)

    Помогите , плизз. Подключил в header , после jquery.js скрипт с указанным Вами содержимым. Сайт не WP, может поэтому не работает. Ссылки как открывались в том же окне, так и продолжают. Через Firebug вроде видно подключение скрипта, отсутсвуют ошибки синтаксиса ( он так говорит :)? но не работает же. Может в движке где есть глобальная установка, но тогда как это вычислить. Гуру, в чем может быть дело. Помогите чайнику.

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      Движок тут роли не играет. Раз у вас Фаербаг, вы можете вывести метки в консоль. Примерно так:
      console.log(this.href); или console.log($(this).attr('href'));

      В консоли при клике по ссылке выведется её урл. Если не выводится, значит, события не происходит.

      Ответить на этот комментарий
    • Княгиня (655 комментариев)

      А, теперь всё ясно. Код скрипта должен находиться внутри конструкции:

      jQuery(document).ready(function(){
      //здесь код
      });
      

      Все click, hover, и прочие события должны находиться в ней.

      Кроме того, по избежание конфликтов с другими скриптам, советую знак $ заменить на оператор jQuery. «Доллар», конечно, короче, но я в последнее время перехожу на длинную форму — именно для профилактики конфликтов.

      Ответить на этот комментарий
      • Дмитрий (9 комментариев)

        Достаточно обернуть весь jQuery код в анонимную функцию с передаваемым параметром $.

        (function($){
        // jQuery dependent code here
        })(jQuery);

        Впрочем, если вы подкючаете jQuery и какой-нибудь Prototype одновременно, то может просто стоит определиться с фреймворком наконец?

        Кстати,
        $(function(){
        });

        абсолютно равно
        $(document).ready(function(){
        });

        Ответить на этот комментарий
        • Княгиня (655 комментариев)

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

          Ответить на этот комментарий
          • Княгиня (655 комментариев)

            Эээ… Надеюсь, кто из них «стоИт», а кто «стОит», очевидно? =)

            Ответить на этот комментарий
  3. Дмитрий (9 комментариев)

    UPD. Функции, вызываемые событием (click, hover и др.) должны находиться внутри конструкции:
    Все потому, что ваш код выполняется в , а ссылки находятся внизу, в  и поэтому просто не существуют на момент исполнения кода.
    $(document).ready можно и не использовать, если подключать скрипты правильно — прямо перед закрытием .

    Ответить на этот комментарий
    • Александр (4 комментария)

      Спасибо, заработало в следующем варианте, и не глючит с другими скриптами:
      jQuery(document).ready(function(){
      jQuery('a[href^="http"],a[href^="ftp"]').not('a[href^="http://site.ru/"]').click(function(){
      window.open(this.href, "");
      return false;
      });
      });

      Но ссылок , открываемой формой скрипт не обрабатывает:(

      Ответить на этот комментарий
      • Княгиня (655 комментариев)

        А вот для формы придётся писать отдельно — ведь данный скрипт работает с элементами «ссылка». Попробуйте так:

        jQuery('form').submit(function(){
         window.open(jQuery(this).attr('action'), "");
        });
        Ответить на этот комментарий
        • Александр (4 комментария)

          Спасибо все здорово заработало. Подключил скрипт на html страницу с формой.
          У меня заработал следующий код:

          jQuery(document).ready(function(){
            jQuery('form').submit(function(){
              window.open(jQuery(this).attr('action'), "");
              return false;
            });
          });

          Почему без «обрамления» не заработало, мне сие не ведомо. =)
          Спасибо еще раз.

          Ответить на этот комментарий
          • Княгиня (655 комментариев)

            Ну так на submit распространяется тот же принцип, что и на click. Потому и нужно было в ready помещать (или инициировать другим способом, который описал в комментах Дмитрий).

            Ответить на этот комментарий
            • Александр (4 комментария)

              Вот я методом тыка, по аналогии и сообразил.:)
              Данный «метод», увы, не заменяет знание предмета и не позволит мне сделать исключение для внутренних ссылок, как в первом примере, и для форм.
              Поэтому второй вариант подключил локально на одной странице с формой ведущей во вне.
              В идеале объединить бы все в одном скрипте и подключить в одном месте, как единую логику открытия ссылок на сайте.(разумеется для тех случаев, когда нужна такая логика)

              Ответить на этот комментарий
  4. Дмитрий (9 комментариев)

    UPD. Функции, вызываемые событием (click, hover и др.) должны находиться внутри конструкции:
    Все потому, что ваш код выполняется в 

    
    

    , а ссылки находятся внизу, в 

    
    

    и поэтому просто не существуют на момент исполнения кода.
    $(document).ready можно и не использовать, если подключать скрипты правильно — прямо перед закрытием тега

    
    

    В прошлом комменте вордпресс съел разметку.

    Ответить на этот комментарий
  5. Дмитрий (9 комментариев)

    На третий раз меня не хватит.

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      А вы пробовали заменить угловую скобку на это: < ?

      Ответить на этот комментарий
  6. Дмитрий (9 комментариев)

    Требую превью комментария и возможность его редактировать! ;)

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

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

      Ответить на этот комментарий
  7. Кетти О (1 комментарий)

    Да, согласна с sportfan, в новом окне удобнее. воспользуюсь обязательно вашим скриптом.

    Ответить на этот комментарий

Есть что сказать? Не молчим!

Используйте теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" code=""> <ul> <li> <ol> .

Комментарии короче 200 символов публикуются без активной ссылки. Пробелы не учитываются.

Ссылки с комментариев dofollow. Ознакомьтесь, пожалуйста, с правилами dofollow-комментирования. Кто не читает, тот сам себе враг.