0
116
2016-04-22

Открываем все внешние ссылки в новом окне благодаря jQuery

Обычная практика использования веб-ссылок заключается в том, чтобы ссылки на другие веб-сайты открывались в новой вкладке. В то же время все ссылки на другие страницы на том же сайте должны открываться в текущей вкладке браузера. Важно понять, почему этот подход является наилучшей практикой...
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

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

Если вы хотите, чтобы ссылка открывалась в новой вкладке браузера, вы обычно устанавливаете target атрибут для ссылки в _blank, например, так:

<a href="https://www.google.com/" target="_blank">Click here</a>

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

К счастью, этот фрагмент jQuery может быть добавлен на ваш сайт и позволит легко и последовательно открывать внешние ссылки в новой вкладке браузера :

/** 
 * Открываем все внешние ссылки в новом окне
 */
jQuery(document).ready(function($) {
    $('a').filter('[href^="http"], [href^="//"]'.not('[href*="' + window.location.host + '"]'.attr('rel', 'noopener noreferrer').attr('target', '_blank');
});




Статья была переведена для блога TechBlog.SDStudio.top

Источник: wpscholar.com