jQuery i nowe okno

Tomek — 23.11.2009 — Frontend, PracaKomentarze (0) — Tagi: , ,

Nie­dawno Klient popro­sił mnie, żeby kilka lin­ków otwie­rało się w nowym oknie. Nie­stety XHTML 1.0 Strict, z któ­rego korzy­stam nie pozwala na dekla­ra­cję target="_blank". Pozo­stają zatem inne spo­soby. Jed­nym z nich jest napi­sa­nie, przy wspar­ciu framework’a jQu­ery, krót­kiego kodu otwie­ra­ją­cego linki wła­śnie w nowym oknie.

Można to zro­bić na dwa spo­soby. Pierw­szy to otwie­ra­nie w nowym oknie wszyst­kich lin­ków, które zawie­rają jakąś klasę, na przy­kład new­Win­dow. Kod wygląda następująco:

  1. $("a.newWindow").click(function() {
  2. window.open(this.href);
  3. return false;
  4. });

Sprawę można rów­nież rostrzy­gnąć w bar­dziej inwa­zyjny spo­sób, to zna­czy dekla­ru­jąc chęć otwar­cia nowego okna dla każ­dego linka, który nie odnosi się do naszej strony. Jest to oczy­wi­ście złe roz­wią­za­nie, bo prze­waż­nie „nowych okien“ nie potrzeba wię­cej niż dwóch lub trzech. Nie­mniej jed­nak, roz­wią­za­nie wystę­puje. I wystar­czy zamie­nić linijkę

  1. $("a.newWindow").click(function()

na

  1. $("a:not([href*='nazwa.dom'])").click(function()

Jak widać, jedyna róż­nica to zmiana selek­tora — wyła­puje teraz wszyst­kie linki, które pro­wa­dzą na adres inny, niż strony, z któ­rej pocho­dzą. Można też dodać na przy­kład atry­but title, mówiący że strona otwo­rzy się w nowym oknie. Robimy to uży­wa­jąc funk­cji attr (można sko­rzy­stać rów­nież z łącze­nia funkcji):

  1. $("a.newWindow").attr("title","Link otwiera się w nowym oknie");

Można zro­bić też dekla­ra­cję w CSS, która doda znany i lubiany sym­bol ↗ — ozna­cza­jący, nie od dziś zresztą, link zewnętrzny:

  1. a[href^="http://"]:not([href*="nazwa.dom"])::after {
  2. content: "\2197";
  3. }

Oczy­wi­ście ten „trick“ nie działa w IE6, ponie­waż ta prze­glą­darka nie roz­po­znaje ani ::before ani ::after. Dla­tego można zro­bić jesz­cze jedną linijkę w jQ, i dodać strzałkę wła­śnie przez nią. Pomaga tu fajna funk­cja append, i tak jak w poprzed­nim przy­padku, można rów­nież użyć łączenia:

  1. $("a.newWindow").append("↗");

Natu­ral­nie nie pochwa­lam uży­wa­nia ani jed­nego, ani dru­giego roz­wią­za­nia, bo wielu użyt­kow­ni­ków narzeka na nowe okna, ale wia­domo, cza­sem Klient wymaga, i na to nie ma rady.

Dodaj komentarz