Cum sa adaugi target=”_blank” la adresele web externe?

02 Iulie, 2010 la 12:12 1023 afisari

Etichete : , , , ,

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! :D

Recomandam, pe aceeasi tema

Gaming Arena - blog de gaming

Comentarii la "Cum sa adaugi target=”_blank” la adresele web externe?"

  1. A.Dragos says:

    Foarte folositor ! Multumesc frumos ! :)

  2. Ionut Staicu says:

    Oh, cmon… Încarci ditamai librăria JS doar pentru atâta 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

  3. GrafsS says:

    Spune si tu: “in loc de ‘domeniu.ro’ scrie domeniul pe care vei folosii scriptul”.

  4. Nu o incarci, in wordpress o ai nativ si jumatate din proiectele din ziua de azi au instalata libraria. :D

  5. Libraria tot o incarci indiferent ca vine sau nu cu WordPress :)

  6. Ionut Staicu says:

    Andrei, este mai rapdiă metoda mea, din punct de vedere al performanței. Dacă ții neapărat să folosești jQuery , uite două metode mai rapide decât 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 decât ce ai pus tu):
    $('a[href^=http]:not([href*=domeniul_tau.com])').attr('target', '_blank');

    În plus, ce faci dacă tu ai pluginuri care folosesc DOAR prototype? Sau moo? Încarci jQuery doar pentru a adăuga target=”_blank”? Not cool!

  7. 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. :D

    Oricum toate trei exemplele date de tine vor pica la adresele relative. :P

  8. Ionut Staicu says:

    1) Nu cred că apelezi funcția de mai multe ori, deci nu există riscul de a adăuga aceeași clasă de două ori;
    2) Îmi poți da un exemplu de site extern relativ? Nu de alta, dar articolul se referă la linkurile externe, nu?
    3) Ia uite cât de rapid este exemplul tău: http://screencast.com/t/MzVmYTJhNTc vs http://screencast.com/t/Y2NmMzAwNGY Sunt ceva mai multe functii apelate și câteva ms în plus…

    Acum argumentează tu că varianta ta este mai rapidă :D

    (bonus)

  9. iosif says:

    Imi place ideea, Andrei. Thx pentru ea!

  10. 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.

  11. Ionut Staicu says:

    1) și eu fac verificări :)
    if (theHref.hostname && theHref.hostname !== location.hostname) {
    Îți verifică două lucruri: dacă linkul are un hostname (adică fix acel domeniu.com) și dacă hostname-ul este același cu adresa curentă. Verificarea aia de care spui tu, să vezi dacă are sau nu target=”_blank” este ușor inutilă. Hai să-ți zic și de ce:
    - poți avea un link extern cu un alt target definit. Varianta ta șterge acel target;
    - apelezi funcția asta la încărcarea paginii și atât. Situațiile în care ai în aceeași pagină și linkuri `cu` și `fără` sunt atât de rare încât nu merită să-ți bați capul.

    2) citește la 1)
    3) firebug->console->profile. Îti arată cât durează rularea unei functii și ce alte funcții apelează. Varianta mea nu doar că apelează mai puține funcții, dar se și execută mai repede :)

  12. 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. :)

  13. Ionut says:

    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

  14. Ionut Staicu says:

    La modul teoretic??? Ți-am prezentat două metode mai eficiente!!! :mrgreen:

  15. 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)

  16. Bogdan says:

    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.

  17. @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'));
    });
    
  18. Ionut says:

    Multumesc Andrei pentru raspuns si ajutor in acelasi timp.

Lasa un comentariu