Cum sa adaugi target=”_blank” la adresele web externe?
22
O problema care tine uneori de bunul simt, iar alteori de faptul ca incercam sa ii tinem pe cititori cat mai mult pe paginile noastre este deschiderea articolelor ce duc in alte domenii in taburi noi. Problema este destul de urata daca stam sa luam la rand fiecare link in parte, sau decidem sa completam noi manual cand scriem un articol.
Avand in vedere ca majoritatea ati lucrat cu jQuery, eu va propun o modalitate dinamica de a face acest lucru. Pentru inceput, instalati ultima versiune de jQuery de aici. Modificati tema site-ului dumneavoastra si adaugati in header codul de mai jos, inlocuind domeniu.ro si www.domeniu.ro cu numele domeniului vostru.
$('a').each(function(index) {
url = $(this).attr('href');
if(url.indexOf('http://') != -1 || url.indexOf('https://') != -1)
{
if(url.indexOf('www.domeniu.ro') == -1 && url.indexOf('domeniu.ro') == -1 && $(this).attr('target') != '_blank')
$(this).attr('target', '_blank');
}
});
De acum, toate paginile externe vor fi deschise in taburi noi. Enjoy! 😀
Daca acest articol contine o greseala, selecteaza cuvintele sau fraza gresita si tasteaza combinatia de taste Shift + Enter sau apasa click aici pentru a o raporta. Multumim!
Foarte folositor ! Multumesc frumos ! 🙂
Oh, cmon… Incarci ditamai libraria JS doar pentru atata lucru? Ia uite aici:
var openLinks = function(){
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=anchors.length-1; i>=0; i--) {
var theHref = anchors[i];
if (theHref.hostname && theHref.hostname !== location.hostname)
theHref.target = "_blank";
}
}();
formatat frumos
Nu o incarci, in wordpress o ai nativ si jumatate din proiectele din ziua de azi au instalata libraria. 😀
Spune si tu: „in loc de ‘domeniu.ro’ scrie domeniul pe care vei folosii scriptul”.
Libraria tot o incarci indiferent ca vine sau nu cu WordPress 🙂
Andrei, este mai rapdia metoda mea, din punct de vedere al performanței. Daca ții neaparat sa folosesti jQuery , uite doua metode mai rapide decat ce ai tu:
jQuery('a').filter(function() {
var theHref = this;
if (theHref.hostname && theHref.hostname !== location.hostname) {
jQuery(theHref).attr('target','_blank');
};
});
Și varianta un pic mai slow (dar tot mai rapid decat ce ai pus tu):
$('a[href^=http]:not([href*=domeniul_tau.com])').attr('target', '_blank');In plus, ce faci daca tu ai pluginuri care folosesc DOAR prototype? Sau moo? Incarci jQuery doar pentru a adauga target=”_blank”? Not cool!
Din punct de vedere al performantei, exemplele date de tine nu au cum sa fie mai rapide decat ale mele pentru ca tu faci atribuirea aia la toate linkurile „straine”. Asta inseamna ca exista riscul sa pui _blank la un link care deja il avea ceea ce inseamna apelarea inutila a functiei attr() care mananca muuult mai mult ca verificarile mele. 😀
Oricum toate trei exemplele date de tine vor pica la adresele relative. 😛
1) Nu cred ca apelezi funcția de mai multe ori, deci nu exista riscul de a adauga aceeasi clasa de doua ori;
2) Imi poți da un exemplu de site extern relativ? Nu de alta, dar articolul se refera la linkurile externe, nu?
3) Ia uite cat de rapid este exemplul tau: http://screencast.com/t/MzVmYTJhNTc vs http://screencast.com/t/Y2NmMzAwNGY Sunt ceva mai multe functii apelate si cateva ms in plus…
Acum argumenteaza tu ca varianta ta este mai rapida 😀
(bonus)
1. Ba da, practic eu fac niste verificari in care voi seta atributul ala, in vreme ce la tine tot ce e strain va fi setat atributul. Pentru 3 linkuri straine sa zicem, doua cu target blank si 1 fara, tu vei seta de trei ori target=”_blank”, in vreme ce eu ma voi focusa doar pe cel fara. 🙂
2. Pai la tine cand vei pune un link de genu „<a href=”/relativ”></a>” theHref.hostname va fi null si va fi diferit fata de location.hostname, deci ii va seta target blank, chiar daca este link intern.
3. Hmm, nu am inteles partea cu numarul de apelari, la tine observ ca sunt in jumatate. Ce ai folosit pentru a testa sa ma lamuresc.
Imi place ideea, Andrei. Thx pentru ea!
1) si eu fac verificari 🙂
if (theHref.hostname && theHref.hostname !== location.hostname) {IÈ›i verifica doua lucruri: daca linkul are un hostname (adica fix acel domeniu.com) si daca hostname-ul este acelasi cu adresa curenta. Verificarea aia de care spui tu, sa vezi daca are sau nu target=”_blank” este usor inutila. Hai sa-È›i zic si de ce:
– poÈ›i avea un link extern cu un alt target definit. Varianta ta sterge acel target;
– apelezi funcÈ›ia asta la incarcarea paginii si atat. SituaÈ›iile in care ai in aceeasi pagina si linkuri `cu` si `fara` sunt atat de rare incat nu merita sa-È›i baÈ›i capul.
2) citeste la 1)
3) firebug->console->profile. Iti arata cat dureaza rularea unei functii si ce alte funcÈ›ii apeleaza. Varianta mea nu doar ca apeleaza mai puÈ›ine funcÈ›ii, dar se si executa mai repede 🙂
1. Ah da, nu am observat prima conditie. Oricum, e bine de luat in calcul la modul de teoretic.
2. Am inteles. Am sa fac si eu niste test ca vad ca acum imi face figuri profile de la consola. 🙂
Am si eu o intrebare pentru tine sau programatori.
Cum pot sa pun in fata tuturor link-urilor externe o pagina de redirect adica ceva de genul:
http://tutorialepc.ro/redirect/redirect.php?url=http://google.com
Multumesc anticipat
La modul teoretic??? Èši-am prezentat doua metode mai eficiente!!!
Sau asa: http://www.inverudio.com/programs/WordPressBlog/NewTabWindowTargetBlankPlugin.php 😀
Ar mai fi, ca pluginuri, Zap_NewWindow: http://www.zappelfillip.de/2005-12-05/zap_newwindow/
si GD Press Tools: http://wordpress.org/extend/plugins/gd-press-tools/ (care mai face o gramada de chestii pe langa asta)
Cred ca este mult mai etic pentru vizitatori ca paginile din site-ul respectiv sa se deschida in acelasi tab. Cu o mica exceptie poate cand este vorba de sectiuni diferite de genul Forum, Galerii foto.
Deschiderea intr-un tab nou dar si notificarea faptului ca un link este extern tine iar de etica webmasterului. Nu cunosc detalii pentru WordPress (sigur trebuie sa fie ceva) dar in Joomla exista un plugin ce adauga automat target=”_blank” precum si o mica imagine in stilul Wikipedia la orice link extern dintr-un articol.
@Ionut
Codul ar arata ca mai jos. Evident pastreaza jquery.
jQuery('a').filter(function() { var url = this; if (url.hostname && url.hostname !== location.hostname) jQuery(url).attr('href','http://tutorialepc.ro/redirect/redirect.php?url=' + jQuery(url).attr('href')); });Multumesc Andrei pentru raspuns si ajutor in acelasi timp.
Salut mia fost folositor ce ati scris mai sus, dar in flash stie cineva cum creez un link extern ?
totusi nu v-ati gandit ca in loc sa faceti aceasta treaba la page load sa o faceti on-demand?
adica in loc sa treceti prin tot dom-ul on page load si sa va puneti tag-ul vostru de target=’_blank’ … n-ar fi mai bine sa luati eventul ‘click’… sa ii verificati target-ul (pe care s-a facut click) din dom si daca e link extern sa deschideti in new tab/new window? Sper ca m-ati inteles :))
Salut, foarte folositoare informatia, good job.