jQuery – отваряне на външните връзки в нов прозорец
March 2nd, 2010Posted in JavaScript
1 Comment »
Преди известно време търсих начин за отвряне на линковете към външни сайтове в нов прозорец или таб на браузъра, като основната цел беше изходния код на страницата да е 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”.
