Přeskoč navigaci

Zde hledá Jyxo.

Jyxo

Javascript napříč okny prohlížeče

Martin Kopta, vydáno/aktualizováno: 10.9.2001/19.01.2002

V souvislosti s rámy existují dva případy, kdy nám může být javascript velmi nápomocen při uchovávání konzistence obsahu okna prohlížeče. Jedním z těch případů je ochrana před vložením naší stránky do cizí rámové struktury, druhý případ nastává v okamžiku, kdy chceme zajistit, aby se za každé okolnosti do okna načetla úplná rámová struktura s obsahem rámů v patřičném kontextu.

První případ je jednodušší, a proto se mu budeme věnovat dříve. Představte si situaci, kdy jiný autor internetových stránek udělá chybu při směrování odkazu z rámové struktury a vaše stránka se nedopatřením načte do některého rámu v okně. Bylo by skvělé, kdybyste mohli stránce nadefinovat předvolbu, která načtení do cizího rámu zabrání.

Pokud dotyčná stránka nepatří do rámové struktury, pak je řešení jednoduché:

<script type="text/javascript">
<!--
  if(window.top != window.self) {
    window.top.location.href = window.self.location;
  }
-->
</script>

Podmínkou ověřujeme, zda objekt window.top je týž jako window.self. Pokud je v okně top načten jiný obsah než v okně self, script načte do okna nejvyšší úrovně obsah právě aktuálního rámu.

Podobným způsobem můžeme ověřit i správnost načtení dokumentu do rámu ve správném kontextu:

 ==============================[x]==
| menu | zahlavi |
| |------------------------|
| | obsah |
| | |
| | |
| | |
| | |
+---------------------------------+

Pokud potřebujeme zjistit, zda se rám top.obsah načetl zárověň s rámy top.menutop.zahlavi se spravným dokumentem, opět k tomu můžeme použít javascript:

<script type="text/javascript">
<!--
  menu_url = "http://www.server.cz/menu.html" ;
  zahlavi_url = "http://www.server.cz/zahlavi.html" ;
  frameset_url = "http://www.server.cz/frameset.html" ;

  menu_loc = top.frames["menu"].location;
  zahlavi_loc = top.frames["zahlavi"].location;

  if((menu_loc != menu_url) || (zahlavi_loc !=
  zahlavi_url)) {
    top.location.href = frameset_url;
  }
--> </script>

Někdy se ale mění obsah více oken, a proto je nevhodné volat pro aktualizaci statický dokument frameset.html -- museli bychom mít pro každou situaci samostatný definiční soubor rámové struktury. Tehdy je vhodné spojit javascript na straně klienta a nějakým skriptem na straně serveru. Takovému skriptu na serveru pak můžete jen odeslat URL na patřičný kontext:

<?php
  // výchozí hodnoty URL
  if(!$menu) {
    $menu = "http://www.server.cz/menu.html" ;
  } else {
    $menu = urldecode($menu);
  }

  if(!$zahlavi) {
    $zahlavi = "http://www.server.cz/zahlavi.html" ;
  } else {
    $zahlavi = urldecode($zahlavi);
  }

  if(!$obsah) {
    $obsah = "http://www.server.cz/obsah.html" ;
  } else {
    $obsah = urldecode($obsah);
  }
?>

<frameset cols="20%,*">
  <frame name="menu" src="<?php echo $menu; ?>">
  <frameset rows="20%,*">
    <frame name="zahlavi" src="<?php echo $zahlavi;?>">
    <frame name="obsah" src="<?php echo $obsah; ?>">
  </frameset>
</frameset>

V první fázi jsme nastavili výchozí URL, který se použije, pouze pokud nebude žádný jiný specifikován. Na tento dokument pak můžeme buď udělat odkaz ve stylu:

<a href=
  "/frameset.php?menu=/menu.html&zahlavi=/zahlavi.html">
  ODKAZ
</a>

Takový odkaz se hodí především pro záložky, případně jej můžeme použít pro automatické přesměrování v javascriptu:

<script type="text/javascript">
<!--
  // umístění dokumentů v kontextu rámů
  menu_url = "http://www.server.cz/menu.html" ;
  zahlavi_url = "http://www.server.cz/zahlavi.html" ;
  obsah_url = "http://www.server.cz/obsah.html" ;

  // objekty rámů
  menu_loc = top.frames["menu"].location;
  zahlavi_loc = top.frames["zahlavi"].location;
  obsah_loc = top.frames["obsah"].location;

  // konstrukce odkazu
  frameset_url = "http://www.server.cz/frameset.php" ;
  frameset_url += "?menu=" + encode(menu_url);
  frameset_url += "&zahlavi=" + encode(zahlavi_url);
  frameset_url += "&obsah=" + encode(obsah_url);

  if((menu_loc != menu_url)
    || (zahlavi_loc != zahlavi_url)
    || (obsah_loc != obsah_url)) {
    top.location.href = frameset_url;
  }
-->
</script>

Pokud se v odkazu mají objevit nějaké znaky se zvláštním významem (:/@?&), je nutné nejdříve je převést na sekvenci %nn, což v javascriptu zajišťuje funkce encode(); v programu PHP pak naopak tyto sekvence musíme převést zase zpět, k čemuž nám dopomůže funkce urldecode().

Ukázali jsme si několik postupů, jak pomocí javascriptu snáze udržet soudržnost obsahu rámu s jeho okolím. Určitě vás napadne několik dalších způsobů využití, a já věřím, že po přečtení minulého a dnešního tutorialu si patřičné funkce zvládnete upravit sami. Jen prosím mějte na paměti, že javascript je tu k usnadnění ovládání webu pro uživatele, rozhodně byste jej nikdy neměli použít samoúčelně, nebo dokonce tak, aby vytvářel překážky.

© 2001 Martin Kopta, Lupa

Tato stránka je přístupná libovolným prohlížečem, nejlépe však vypadá v prohlížeči, který podporuje HTML 4.0 a CSS 2 (Internet Explorer od verze 5, Mozilla, Opera a další). Pokud čtete tuto zprávu, váš prohlížeč zřejmě dostatečně nepodporuje CSS. Stránku sice vidíte bez pokročilejšího formátování, avšak veškerý obsah je plně přístupný i pro vás.