Dnes si řekneme něco o objektech location a history, metodě objektu window - scroll a metodě objektu document - open. A protože právě probíráme práci s okny a rámy, budou se příklady vztahovat na tuto oblast.
Jak otevřít nové okno a následně ho zavřít již
umíme.
Ovlivňovat rámy mezi sebou již také umíme a proto si dneska ukážeme již pouze určité finesy při práci s okny a rámy.
Objekty window: Location a History
Objekt location
Objekt location obsahuje informace o URL aktuálně načtené stránky. URL stránky tak můžeme změnit přímo na novou adresu:
window.location = "http://www.google.com";
Úplně postačuje:
location = "http://www.google.com"; //jak jsme si již uvedli, objekt window nemusíme uvádět
Jako příklad může posloužit tento krátký kód, který změní aktuální stránku po 5 vteřinách a zobrazí stránku www.google.com:
setTimeout("window.location = `http://www.google.com`;", 5000);
Okno můžeme také změnit nebo načíst pomocí jedné ze dvou metod objektu location:
- reload() - způsobí znovunačtení stránky. Používá se pokud potřebujeme obnovit obsah stránky.
- replace(URL) - načte stránku danou URL v okně nebo rámu prohlížeče. Staré umístění stránky je v historii stránek přepsáno současnou stránkou. (Pokud například navštívíme stránku www.neco.cz/prvni.html, poté www.neco.cz/replace.html, která nás pomocí metody replace přesměruje na stránku www.neco.cz/druha.html. I když jsme navštívili celkově tři stránky v historii prohlížeče jsou pouze dvě, www.neco.cz/prvni.html a www.neco.cz/druha.html.)
Použití metody
replace() zapříčiní, že uživatel není schopen vrátit se na předchozí stránku pomocí tlačítka prohlížeče Zpět. Neznamená to, že uživatel nemůže použít tlačítko Zpět vůbec, ale pokud ho použije bude vrácen před nahrazovací stránku
(stránku, na které jsme použili metodu replace).
Tato metoda může při špatném použití hodně ztížit život uživatelům, jindy zase naopak může být její použití v některých situacích přímo vhodné. V následujícím příkladu použijeme opět metodu setTimeout() pro opakované načítání stránek s reklamou do rámu každé tři vteřiny. Nechte ukázku běžet několik vteřin a poté zkuste vrátit na úvodní stránku pomocí tlačítka Zpět na prohlížeči.
<html>
<head>
<title>Reklama pomocí - location</title>
<script type="text/javascript">
<!--
// Seznam reklamních stránek.
var stranky = new Array("rkl1.html", "rkl2.html", "rkl3.html");
var n = 0;
// Funkce měnící stránky s reklamou ve spodním rámu.
function obnReklamu() {
window.parent.frames["reklama"].location = stranky[n];
if (++n >= stranky.length)
n = 0;
setTimeout("obnReklamu()", 3000);
}
//-->
</script>
</head>
<body onLoad="obnReklamu()">
<font face="Arial,Helvetica,sans-serif" size="2">
<b>Příklad se změnou reklamního banneru.</b>
<p>
Pokaždé, když se banner změní, je přidána nová URL do historie stránek v prohlížeči.
Pokud by jste se chtěli vrátit na předchozí stránku pomocí tlačítka zpět na prohlížeči,
asi by jste se uklikali.
</font>
<p>
</body>
</html>
Museli jste několikrát klinout, že ano? A čím déle by stránka běžela, tím obtížnější by bylo vrátit se na původní stránku. Nyní si předvedeme, jak tento problém vyřešit pomocí metody replace(). V původním skriptu s reklamou vyměňte funkci obnReklamu() za tuto:
function obnReklamu() {
window.parent.frames["reklama"].location.replace(stranky[n]);
if (++n >= stranky.length)
n = 0;
setTimeout("obnReklamu()", 3000);
}
Objekt history
Další z užitečných objektů je objekt history, který uchovává informace o URL všech navštívených stránek. Objekt history podporuje tři metody:
- forward() - načte URL stránky, která následuje v historii za současnou stránkou.
- back() - načte URL předcházející stránky z historie.
- go() také načítá URL stránek z historie prohlížeče. U této metody můžete definovat o kolik pozic v historii se má prohlížeč přesunout ze současné pozice. Můžeme například zapsat, že se prohlížeč má vrátit o dvě pozice nebo na stránku obsahující v URL určitý textový řetězec. Pokud metodě go zadáme jako argument textový řetězec, najde první stránku v historii, jejíž URL obsahuje zadaný textový řetězec.
Tyto dvě metody jsou si ekvivalentní:
history.go(-1); //při 0 se nahraje aktuální stránka
history.back();
Tento příkaz načte první stránku jejíž URL v historii obsahuje slovo "netscape" (je brán zřetel na velikost písmen):
history.go("netscape"); // nepodporuje IE
Poznámka: Pokud příkaz nemůže vyhovět, neprojeví se žádná změna a to u všech tří metod. Obsah okna se nezmění a není vygenerováno chybové hlášení.
Předpokládejme, že máte stránku, na kterou vedou odkazy z ostatních vašich stránek. Chcete-li na tuto stránku vložit odkaz pro návrat na předcházející stránku, nastává problém. Nevíte, z které stránky byla současná stránka načtena. Proto nemůžeme specifikovat atribut HREF=, ale využijeme objekt history:
<a href="#" onClick="history.back(); return false;">Zpět</a>
Změna obsahu stránky
Metoda scroll() umožňuje posouvat (rolovat) obsah webové stánky nebo rámu. Stránka může být posouvána jak horizontálně, tak vertikálně.
window.scroll(x,y); // Posune obsah okna nebo rámu na pozici udanou parametry x a y, což jsou souřadnice. Levý horní roh HTML dokumentu odpovídá souřadnicím [0,0].
V uvedeném příkladu je spodní rám s předpovědí počasí pro různá světová města posouván pomalu nahoru.
<html>
<head>
<title>Rolující předpověď počasí</title>
<script type="text/javascript">
<!--
// Proměnná y pro počáteční vertikální pozici rámu.
var y = 0;
function rolujRam() {
// Roluje rám s předpovědí počasí vždy o jeden pixel (0-870) a vždy po
// 50 milisekundách volá funkci znovu.
y++;
if (y > 870)
y = 0;
window.parent.frames["pocasi"].scroll(0, y);
setTimeout("rolujRam()", 50);
}
//-->
</script>
</head>
<body bgcolor="#ffffff" text="#000000" onLoad="rolujRam();">
<font face="Arial,Helvetica,sans-serif" size="2">
<b>Příklad rolující stránky.</b>
</font>
</body>
</html>
V příkladu je stránka posouvána až do 870 pixelů a poté se začne posouvat opět od začátku.
Dalším způsobem jak přepsat obsah okna je použít metody write() a writeln() objektu dokument. Tyto funkce umožňují vypsání textového řetězce, ve kterém mohou být i HTML tagy pomocí prohlížeče na obrazovku monitoru. Následující příklad vypíše text zadaný do formuláře v horním rámu do spodního rámu.
<html>
<head>
<title>Vypsání textu</title>
<script type="text/javascript">
<!--
function prepisRam() {
// Přepíše obsah spodního rámu textem vepsaným do formuláře.
window.parent.frames["text"].document.writeln(document.forms[0].text.value);
window.parent.frames["text"].document.close();
return false;
}
//-->
</script>
</head>
<body bgcolor="#ffffff">
<font face="Arial,Helvetica" size=2>
<b>Příklad s přepsáním obsahu jiné stránky.</b>
<p>
Napište nějaký text a stiskněte "Odeslat", text bude zobrazen ve spodním rámu.<br>
Můžete používat i HTML tagy, jako napříkad <B></B>,<BR>:
<form onSubmit="return prepisRam();">
<textarea name="text" rows=5 cols=80></textarea><br>
<input type="submit" value="Odeslat">
<input type="reset" value="Vymazat">
</form>
</font>
<p>
</body>
</html>
Můžete si vyzkoušet různé experimenty s vkládáním různých HTML tagů. Například můžete použít tag <BODY> s různou barvou pozadí stránky. Další experimenty se dají provádět i se skripty, napište si nějaký skript a vyzkoušejte si co se stane. Příklad pro ty s menší fantazií :-)
<script>
alert("Ahoj lidi!");
</script>
Prohlédněte si zdrojový kód spodního rámu (pravé tlačítko myši a následně "Zobrazit zdrojový kód") a uvidíte, jak se projevil váš vstup ve spodním rámu.
Ve funkci prepRam() jsou nejdůležitější tyto dva řádky:
window.parent.frames["text"].document.writeln(document.forms[0].text.value);
window.parent.frames["text"].document.close();
První řádek vypíše text zapsaný do formuláře v horním rámu do stránky v rámu spodním. Následně je volána metoda close(), která prohlížeči sdělí, že vstup je u konce a může dojít k vyrendrování (vygenerování) stránky. Metoda close() by měla být volána vždy, když dojde k přepsání obsahu stránky.
Malé vylepšení
Možná jste si všimli, že poslední příklad přidává každou nově vygenerovanou stránku do historie prohlížeče. S podobným problémem jsme se už setkali na stránce s reklamou. Problém vyřešíme podobně jako u reklamy, přidáme jeden řádek s metodou open() do funkce prepRam().
Poznámka: Metoda open() je v tomto případě metodou objektu document, ne window!
window.parent.frames["text"].document.open("text/html", "replace");
window.parent.frames["text"].document.writeln(document.forms[0].text.value);
window.parent.frames["text"].document.close();
Řetězec "text/html" v metodě open() sděluje prohlížeči, že má očekávat HTML data. Další řetězec "replace" prohlížeči sdělí, že nemá přidávat položky do historie prohlížeče. Je to stejné jako, když použijeme location.replace(URL) při změně obsahu okna nebo rámu.
Ostatní možné MIME-typy pro metodu open jsou:
"text/html" - implicitní HTML formát
"text/plain" - prostý text, značky HTML se neinterpretují
"image/gif" - obrázek ve formátu GIF
"image/jpeg" - obrázek ve formátu JPEG
"image/x-bitmap" - obrázek ve formátu x-bitmap
Dalšími MIME-typy jsou identifikace formátů pro instalovaná rozšíření plug-in, která se pak starají o jejich interpretaci sama.
Jednoduchá změna předcházejícího příkladu snad vše objasní. Změněná funkce prepRam() po přidání jednoho řádku nyní vypadá takto:
function prepisRam() {
// Přepíše obsah spodního rámu textem vepsaným do formuláře.
window.parent.frames["text"].document.open("text/html", "replace");
window.parent.frames["text"].document.writeln(document.forms[0].text.value);
window.parent.frames["text"].document.close();
return false;
}
Poznámka: V IE 6 nefunguje správně (proč, to nevim).
Část o oknech a rámech končí. Příště začneme novou kapitolu "Více o formulářích".