Popup okno ještě trochu jinak 3.

V předchozím článku jsme dali uživateli k dispozici volbu, zda se má vybraná akce stát automaticky současně se vstupem na stránku. V tomto článku dáme uživateli na výběr, zda chce, aby se všechny odkazy na stránce otevíraly do nového okna. Užití může nalézt v různých fotogaleriích, katalozích, nabídkách produktů nebo rozsáhlých popisech služeb a výkladových slovnících.

Ovládání, ukládání cookie, a tedy i použitý soubor Cookies.js jsou podobné jako v předchozím článku, nebudu se zde proto zabývat detailním popisem práce s cookies, čtením stavu a nastavováním zatrhávacího políčka. Probereme si skript, který dynamicky přidá nebo odebere z odkazů na stránce otevírání do nového okna. Vyzkoušejte si ukázku (zdrojový kód).

Nejprve ukázka stránky:

<a href=“http://interval.cz/“>Interval.cz</a>
<br />
<a href=“http://diskuse.interval.cz/“>Diskuse</a>
<br />
<a href=“http://interval.cz/redakce.asp“>Redakce</a>
<script type=“text/javascript“ src=“JavaScripts/Cookies.js“></script>
<script type=“text/javascript“ src=“JavaScripts/NewWinOpen.js“></script>
<form name=“checkauto“ id=“checkauto“>
<input type=“checkbox“ name=“newwinopen“ id=“newwinopen“ value=“1″ onclick=“javascript: if (this.checked) { MyCookie.Write(‚newwinopen‘,1,365); anchor(true)} else { MyCookie.Write(‚newwinopen‘,0,365);anchor(false) }“ /> otevírat vše v novém okně
</form>
<!– toto na konec stránky –>
<script type=“text/javascript“>
<!–
if (MyCookie.Read(‚newwinopen‘)==1)
  document.forms.checkauto.newwinopen.checked=true;
else
  document.forms.checkauto.newwinopen.checked=false;
if (document.forms.checkauto.newwinopen.checked)
  anchor(true);
// –>
</script>
<!– /toto na konec stránky –>

Jak vidíte, ovládání je zajištěno políčkem newwinopen v pojmenovaném formuláři checkauto, do cookie newwinopen se uloží „1“ nebo „0“ na dobu jednoho roku v závislosti na stavu zatržení pole při události onclick. Na konec stránky je zařazen skript, který při zavádění stránky otestuje stav políčka a pokud je zatržené, provede se funkce anchor, která zajistí otevírání odkazů v novém okně. Tato funkce je volána také při události onclick v zatrhávacím políčku, aby se nastavení projevilo ihned. Pokud bychom funkci nevolali zde, nastavení by se projevilo až po novém načtení stránky, kdy by se uplatnila nová hodnota cookie.

Funkce anchor je vyjmuta do externího souboru NewWinOpen.js a nyní si její princip popíšeme:

var newwindow=“_blank“ // cílové okno
function anchor(target)
{
  if (target) // pokud je true, nastavit otevírání do cílového okna
    where = newwindow;
  else // jinak nastavit do téhož
    where = „_self“; // target pro totéž okno
  for (var i=0; i<=(document.links.length-1); i++)
  { // procházet všechny odkazy (elementy links) v dokumentu
    if (target && where!=“_blank“) // chceme otvírat v jiném okně, ale ne v novém „_blank“ ?
      document.links[i].onclick=function() // pokud ano, pak na každý link nastavit na obsluhu onclick funkci
      {
        if (window.secwin && !secwin.closed) // existuje již objekt našeho okna a okno není zavřené?
          secwin.location=this.href // přesměrovat okno na adresu odkazu
        else // ne, okno je třeba otevřít
          secwin=window.open(this.href)
        secwin.focus() // přesunout okno s otevíraným odkazem do popředí
        return false // stornovat provedení původního odkazu
      }
    else
    { // chceme nové okno „_blank“ nebo nechceme nové okno
      if (newwindow==“secwin“) // nenacházíme se již v našem novém okně?
        document.links[i].onclick = „“; // odebrat obsluhu onclick proti zacyklení
      document.links[i].target = where; // nastavit atribut target odkazu na hodnotu, která je ve where – newwindow nebo _self, podle zvoleného režimu
    }
  }
}

Cíl nového okna si můžeme nastavit do proměnné newwindow. Zde je _blank, každý odkaz se tedy otevře do úplně nového okna. Princip funkce spočívá v procházení všech linků ve stránce, nastavení atributu target a případně nastavení obsluhy onclick. Navíc je přidáno rozlišení, zda chceme skutečně vždy nové okno, nebo jen jedno jiné okno, než je naše základní stránka – v tom případě jsou ošetřeny stavy, kdy by mohlo dojít k zacyklení a také je toto okno vždy přesunuto do popředí v okamžiku, kdy je do něj nahráván nový obsah.

Je vidět, že řízení „otevírat nové okno / nahrát nový obsah do již otevřeného okna“ zabírá podstatnou část funkce, na druhé straně funkce díky tomu poskytuje velmi komfortní ovládání odkazů. Odkazy, které mají samy o sobě definován atribut target do nového okna, se nebudou do nového okna otevírat, pokud bude zvolena možnost neotevírat do nového okna – atribut target bude totiž přenastaven na hodnotu _self.

Výchozí hodnotu zatrhávacího políčka a tedy i chování odkazů je samozřejmě možné ovlivnit přidáním atributu checked="checked". Dalším vylepšením by byla možnost zvolit si otevírání vždy do nového okna nebo jen do jednoho jiného okna, jehož obsah se změní při kliknutí na odkaz v základní stránce (toto můžeme nyní měnit pouze napevno nastavením proměnné newwin). Skript je otestován v nejnovějších prohlížečích Internet Explorer, Mozilla, Netscape a Opera.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.