jQuery – отваряне на външните връзки в нов прозорец

Square

Преди известно време търсих начин за отвряне на линковете към външни сайтове в нов прозорец или таб на браузъра, като основната цел беше изходния код на страницата да е xHTML валиден, което е проблем при използвнето на target=“_blank“ . Попаднах на едно решение с помоща на jQuery. Използва се функцията indexOf , с помощта на която се откриват всички хипервръзки, които не съдържат URL на сайта и към тях се добавя атрибута за отваряне в нов прозорец. Кода на функцията е следния:

$(document).ready(function(){
		$('a').each(function(){
			var url = $(this).attr('href');
			if(url.indexOf('http://www.site.com')){
				$(this).attr({target: '_blank'});
			}
		})
	});

Към момента в блога се  ползва тази техника с версия на jQuery – 1.4.2. Трябва да се има предвид, че е от значение дали адресът е зададен с www или без, тъй като ако е без всички връзки към вътрешни за сайта страници, които са въведени с www ще се отварят също в нов прозорец.

А за да се  даде възможност за избор на потребителите  може да се добави опция, за отваряне линковете както в нов, така и в същия прозорец. За целата може да се използва подходяща икона пред самия линк, която да служи за отваряне в нов прозорец, а самия URL да се отваря в настоящия. По подобен начин са реализирани външните връзки в Уикипедия. Самият код на функцията ще изглежда по следния начин:

$(document).ready(function(){
		$('a').each(function(){
			var url = $(this).attr('href');
			if(url.indexOf('http://www.site.com')){
var image_link = '<a href="'+url+'" target="_blank"><img src="external.png" /></a>';
				$(this).after(image_link);
			}
		})
	});

Предполагам, че има подобни варианти за mootools  и за останалите популярни javascript библиотеки, така че няма да е проблем да се намерят и други алтернативи на target=“_blank“.

Comment

One Reply to “jQuery – отваряне на външните връзки в нов прозорец”

  1. Това може да го напишеш по-просто:

    $('a[href^=http://www.site.com]').each(function(){
    $(this).after(
    '<a href="'+this.href+'" rel="nofollow"></a>'
    );
    });

    Въпреки че това според мен си е излишно натоварване на страница с излишен код. Да не говорим, че пак се използва target=“_blank“ просто валидатора не го вижда. Но това не го прави валиден и смисъла от валидирането не е просто да се валидира 🙂 Така, че най-добре си слагай target=“_blank“ на воля.

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *