Bookmarklet

co to je a jak to používat

Bookmarklet je kousek javascriptového kódu uložený v oblíbené položce. Dovoluje uživateli provést na stránce nějaký javascript, který autor stránky nezamýšlel. Já si třeba takhle zvětšuji písmo, podtrhávám nepodtrhané odkazy nebo na jedno kliknutí měním rozměry okna. V tomto návodu se pokusím vysvětlit, jak bookmarklety fungují a jak si je tvořit.

Bookmarkletům se také říká favelety. Není v tom rozdíl, jde pouze o zastrašování normálních lidí. Bookmarklet se odvozuje od slova bookmark = záložka (přípona let znamená, že to něco dělá, srovnej applet, servlet, úlet), favelet je asi od slova favorite = oblíbený.

Javascript do řádku adresy

Zkuste si otevřít okno prohlížeče a napište do adresního řádku:

javascript:document.write("ahoj")

na prázdné stránce se potom objeví slovo ahoj. Prohlížeč podle začátku adresy javascript: poznal, že nemá přejít na jinou stránku, ale že má spustit následný skript. A ten následný skript document.write("ahoj") prostě jenom vypíše slovo.

Psát ahoj je na nic. Užitečnější je přepnutí velikosti okna. Častým uživatelským rozlišením obrazovky je rozlišení 800 na 600 (v létě 2003 asi 28% uživatelů). Při ladění stránek je potřeba vidět stránku tak, jako uživatel s tímto rozlišením. Do řádku adresy si napište kód

javascript:resizeTo(800,600)

a okno se zvětší nebo zmenší na tuto velikost (nefunguje v některých verzích Opery 7). Takovéhle přizpůsobení velikosti okna je pro webdesignéra skvělá věc. Ten zápis je ale moc zdlouhavý a je nuda ho ťukat ručně, takže se vyplatí udělat z něj bookmarklet.

Jak funguje bookmarklet

Napřed jak funguje oblíbená položka (často se tomu říká záložka, bookmark, favorite link, prostě to, co má prohlížeč v menu "oblíbené"). Oblíbená položka obsahuje adresu, většinou http://něco (plus popisek apod., to nyní není důležité). Když uživatel ťukne na oblíbenou položku, tak si prohlížeč vezme adresu té oblíbené položky a přejde na ni. Zatím všechno jasné.

Co se ale stane, když oblíbená položka nebude mít v adrese http://něco, ale javascript:něco? Prohlížeč si tu adresu vezme a zkusí na ní přejít. Jenže jak na ní může přejít, když to není adresa? No vlastně tomu teoreticky nerozumim, ale prostě ten javascript se vykoná. Přitom ale uživatel fakticky zůstane na právě prohlížené stránce.

Příklad: jsem na stránce www.seznam.cz a chci vědět, jestli se vejde do okna velikosti 800x600. Zvolím z menu oblíbenou položku jménem 800x600, v níž mám uložený javascript, konkrétně javascript:resizeTo(800,600). Co se stane? Zůstanu na stránce www.seznam.cz, ale velikost okna se přizpůsobí. Vidím, že Seznam se do toho okna na šířku vejde.

Jak vytvořit bookmarklet

V každém prohlížeči se to dělá trochu jinak. Proberu to pro Mrkvosoft Exploder. Začátek je dost nelogický (pokud znáte lepší způsob, sdělte mi ho): vlezu na libovolnou stránku a přidám si ji do oblíbených. Potom si u té nové oblíbené položky nakliknu vlastnosti a

Příklad: budu chtít udělat v Exploreru ten bookmarklet pro simulaci rozlišení 800 na 600

  1. vlezu si třeba na stránku www.seznam.cz a přidám si jí do oblíbených. (Nebojte, jenom na chvilku.)
  2. dám oblíbené, najdu tu novou položku, kliknu na ní pravým tlačítkem a zvolím vlastnosti
  3. na kartě Obecné změním jméno podle sebe, třeba tam dám "800x600", abych to pak poznal
  4. na záložce Webový dokument změním adresu URL na "javascript:resizeTo(800,600)" (bez uvozovek) Prohlížeč se chvíli cuká že to jako není bezpečné. Nebojte se, je to asi tak nebezpečné jako zapnutý javascript.

Potom, když budu chtít nasimulovat to rozlišení, zvolím prostě z nabídky oblíbené tu položku jménem 800x600. Nikam mě to nepřepne, ale provede skript.

Jednodušší postup vytvoření bookmarkletu

Poradil mi to Jarek: Pokud víte, do kterého adresáře si prohlížeč ukládá oblíbené položky, stačí vytvořit v libovolném textovém editoru, který ukládá čistý text (notepad,textpad,...) soubor s názvem nazev.url s obsahem:

[InternetShortcut]
URL=javascript:resizeTo(1024,768)

Ještě jednodušší postup vytvoření bookmarkletu

Funguje to v Exploreru. Stačí vypsat kód bookmarkletu do řádku adresy a přetáhnout ho myší buď do panelu Odkazy (pokud je zapnutý), nebo do nabídky Oblíbené (při podržení myši se za chvilku se vyroluje). Poradil Miro.

Připravené bookmarklety

Vymýšlet vlastní skripty a pak z nich vařit bookmarklety je otrava. Občas se proto na netu dají najít stránky obsahující připravené bookmarklety. Většinou mají formu odkazu, na který stačí kliknout pravým tlačítkem a zvolit "přidat do oblíbených". Je to tedy jednodušší než tvořit vlastní bookmarklet.

Osobně používám zatím pouze 4 bookmarklety. Zkuste si následující odkazy přidat do oblíbených:

Odstranění stylů (tenhle bookmarklet mám od Marka Prokopa)

800x600 popsáno výše

Zvětšení stránky (lupa 150%) v Internet Exploreru

Přidání vlastního stylu ke stránce - je potřeba vytvořit si css soubor s vlastními styly a dát si ho někam na disk. Já ten soubor mám v adresáři c:\pokusy. (Funguje to jenom v Exploreru, ale mně to stačí.) V souboru se svými styly mám třeba povinné podtrhávání všech odkazů, větší písmo odstavců apod. Dá se tam napsat jakýkoliv styl.

Další bookmarklety

Napište mi, prosím odkazy na stránky s bookmarklety (i když se tam třeba jmenují favelety). Díky.

Pixy má na stránkách perfektní přehled bookmarkletů, spoustu svých originálních. To už nejsou takové prkotiny, jako ukazuju tady, to už umí ledascos. Škoda, že je to anglicky.

Jesse's bookmarklets

Přehled bookmarkletů na serveru, který se podle toho jmenuje.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy, objekty Příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.