Okna v Javascriptu - Builder.cz - Informacni server o programovani

Rubriky
Odběr fotomagazínu

Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!

 

Zadejte Vaši e-mailovou adresu:

Kamarád fotí rád?

Přihlas ho k odběru fotomagazínu!

 

Zadejte e-mailovou adresu kamaráda:



JavaScript

Okna v Javascriptu

10. října 2001, 00.00 | Pomocí Javascriptu můžete velmi snadno a efektivně pracovat a otvírat nová okna prohlížeče. Tento díl popisuje vše co budete potřebovat vědět.

S uživatelskými okny můžete s pomocí JS poměrně snadno pracovat a máme k použití poměrně dost funkcí, které vám umožní nastavit si nejen vzhled nově otevřeného okna.

Otevření nového okna s pomocí HTML

Než vám ukáži, jak lze pracovat s okny pomocí JS, podívejte se na kód této stránky:

<HTML>
<HEAD>
 <TITLE>Název</TITLE>
</HEAD>
<BODY>
<P><A HREF=https://www.builder.cz TARGET=nove>Builder</A> v novém okně</P>
</BODY>
</HTML>

Na stránce se nachází odkaz, který otevře adresu v novém okně (neztratíte tak své "zákazníky"). Pomocí tohoto příkazu však nemůžete nijak nastavit nové okno, k tomu je potřeba Javascriptu.

Pozn.: K otevření nového okna nedojde vždy. Atribut elementu pouze určuje, do jakého okna se stránka načte. Pokud tedy budete mít již nějaké také okno (rám) s názvem nove, stránka se načte tam.

Otevření existující stránky v novém okně

Pomocí funkce window.open() můžete otevřít stránky do nového okna. Obecný zápis takové stránky vypadá takto:

window.open("URL", "název_okna", "vlastnosti_okna");

URL - adresa stránky, která se má nahrát do nového okna. Pokud necháte prázdné uvozovky, otevře se prázdné okno.

název_okna - určuje název okna, který právě otevíráte

vlastnosti_okna - pomocí nich určíte vlastnosti nového okna. Dovolil jsem si je shrnout do následující tabulky:

Vlastnost Možná hodnota Funkce
toolbar yes/no zobrazit/nezobrazit vrchní lištu s ikonami
location yes/no zobrazit/nezobrazit řádek s adresou stránky
directories yes/no zobrazit/nezobrazit políčka s vybranými adresami
status yes/no zobrazit/nezobrazit stavový řádek
menubar yes/no zobrazit/nezobrazit hlavní menu prohlížeče
scrollbars yes/no zobrazit/nezobrazit posuvné šipky
resizable yes/no povolit/zakázat možnost měnit velikost okna
copyhistory yes/no přenést/nepřenést historii navštívených stránek
width číslo šířka nového okna
height číslo výška nového okna
top číslo x-ová souřadnice nového okna
left číslo y-ová souřadnice nového okna

Myslím, že nebude na škodu si probranou látku vyzkoušet. Vytvoříme skript, který otevře nové okno s parametry: nezobrazit vrchní lištu s ikonkami, zobrazit řádek s adresou, nezobrazovat políčka s vybranými adresami, zobrazit stavový řádek, zobrazit hlavní menu prohlížeče, nezobrazit posuvné šipky, povolit změnu velikosti a nepřenést historii navštívených stránek.

<HTML>
<HEAD>
 <TITLE>Trochu podivné okno</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
 function noveokno()
 {
  window.open("https://www.builder.cz","BUILDER",
  "toolbar=no, locaton=yes, directories=no, status=yes, menubar=yes,"+
  "srollbars=no, resizable=yes, copyhistory=no, width=500, height=200,"+
  "top=30, left=30"); 
 }
//-->
</SCRIPT>
</HEAD>
<BODY>
<FROM>
 <INPUT TYPE=button VALUE=Builder onClick=noveokno();>
</FROM>
</BODY>
</HTML>

Samé novoty - nová stránka v novém okně

Jaké výhody má vytvoření nové stránky v novém okně? Jak pro koho, ale já toho používám se spojením s PHP, kdy obsah okna mi vygeneruje PHP z databáze. Javascript totiž umí do takového okna velmi snadno zapisovat, tzv. stránka nemusí nikde existovat/být uložena a je vytvořena na straně klienta.

<HTML>
<HEAD>
 <TITLE>Trochu podivné okno</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
 function novinka()
 {
  na_novinku=window.open("","HLASKA",
  "toolbar=no, locaton=yes, directories=no, status=yes, menubar=yes,"+
  "srollbars=no, resizable=yes, copyhistory=no, width=500, height=200,"+
  "top=30, left=30"); 
  na_novinku.document.write(Nic nového tu nemáme);
 }
//-->
</SCRIPT>
</HEAD>
<BODY>
<FROM>
 <A HREF=javascript:novinka();>Novinka</A>
</FROM>
</BODY>
</HTML>

Po načtení stránky se na obrazovce objeví odkaz, který po "klepnutí" vygeneruje stránku s obsahem ukazatele na_novinku. Zde se poprvé setkáváme s pseudoprotokolem javascriptu. Pomocí něhož dokážeme zapsat javascriptový kód přímo v URL adrese. V tomto příkladu jsme toho zápisu použili v HTML zápisu <A HREF>.

Tento zápis doslova říká prohlížečí stránek, aby po klepnutí na odkaz nenačetl novou stránku, ale aby provedl příslušný javascriptový kód. V našem případě se proto vyvolá funkce novinka().

Funkce novinka() zabezpečuje otevření prázdného okna a součastně i přiřazuje tomuto oknu obsah. Dříve než je možné nově otevřenému oknu začít obsah přiřazovat, musíme již při samotném otevírání tohoto okna přiřadit určité proměnné ukazatel, který by ukazoval na toto okno. Na základě této proměnné můžeme potom oknu přiřadit obsah a komunikovat s ním.

Manipulace s okny

Naučil jsem vás zvolit obsah a vzhled nového okna prohlížeče. Javascript však toho umí mnohem více. Co dalšího Javascript umí si můžete prohlédnout v tabulce:

Funkce Činnost
close() zavření okna
focus() nastavení okna do popředí
blur() nastavení okna do pozadí
moveTo(x,y) přesun okna na souřadnice x,y
moveBy(x,y) přesun okna o x-px doprava (doleva) a o y-pixelů dolů (nahoru)
resizeTo(x,y) změna rozměru okna na rozměr x*y pixelů
resizeBy(x,y) změna rozměru okna o x-px doprava (doleva) a o y-pixelů dolů (nahoru)
scrollTo(x,y) rolování textu v okan na souřadnice x,y
scrolTo(x,y) přesun okna o x-px doprava (doleva) a o y-pixelů dolů (nahoru)

Myslím, že pokud jste pochopili předchozí příklad, že k tomu nemusím nic moc vysvětlovat. Podívejte se na ještě jeden kód a všimněte si kódu: document.write(<A HREF=Javascript:window.close()>Zavrit<A>. Podobně totiž budou vypadat všechny příklady, kde ovládáte okno.

<HTML>
<HEAD>
 <TITLE>Trochu podivné okno</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
 function novinka()
 {
  na_novinku=window.open("","HLASKA",
  "toolbar=no, locaton=yes, directories=no, status=yes, menubar=yes,"+
  "srollbars=no, resizable=yes, copyhistory=no, width=500, height=200,"+
  "top=30, left=30");
  
 with(na_novinku)
  {
    document.write(<HTML>\n<TITLE>Novinka</TITLE>\n<BODY>);
    document.write(<P>Nic nového tu nemáme</P>);
    document.write(<A HREF=Javascript:window.close()>Zavrit<A>
 }
//-->
</SCRIPT>
</HEAD>
<BODY>
<FROM>
 <A HREF=javascript:novinka();>Novinka</A>
</FROM>
</BODY>
</HTML>

Obsah seriálu (více o seriálu):

Tématické zařazení:

 » Rubriky  » JavaScript  

 » Rubriky  » Web  

Poslat článek Diskuse (0) Tisk Přečteno: 4662x

www.builder.cz/rubriky/javascript/okna-v-javascriptu-155909cz

 

 

 

Nejčtenější články
Nejlépe hodnocené články
Krátké zprávy

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: