Opera Lover - 10 den
Z Operacesky Wiki
Obsah |
Den 10. Uživatelský javascript
Možná si ještě vzpomenete, že v díle Den 4 - Pokročilá nastavení jsme narazili na položku, která se jmenovala Uživatelský JavaScript. Sliboval jsem vám, že v dalších dílech se na tuto funkci podíváme podrobněji. Dnes plním své slovo a probereme funkci, která mj. umožňuje prohlížet i nesprávně vytvořené webové stránky.
Možná jste si ještě navíc všimnuli, že v posledních dílech jsem se snažil ukázat, že v Opeře lze zobrazit všechny webové stránky. Nejprve jsem vás seznámil s funkci Přizpůsobit šířce okna, s níž můžete jednoduše "opravit" stránky, které se špatně zobrazují v okně prohlížeče (jsou příliš široké). Pak následoval soubor ua.ini, který říká Opeře, jako který prohlížeč se má tvářit - tak můžete zobrazit i stránky, které jsou jinak přístupné jen v Internet Exploreru nebo Netscapu.
Ale co když ani jedno nestači? Co když stránky nabízejí nějaké speciální funkce, u kterých se zdá, že nefungují? Co když nějaký zlomyslný (nebo přihlouplý) webdesignér zašel ještě dál než jen k detekci prohlížeče a stránky jsou v Opeře nepoužitelné?.
Odpověd zní: zkuste "Uživatelský JavaScript". Pokud si pamatujete na uživatelské styly (uživatelský mód), pak jste zřejmě pochopili princip, jak lze nahradit autorem stránek stanovenou formu tím, co chce uživatel. Uživatelský JavaScript funguje obdobně. Nahradí obsah webové stránky nebo se k němu připojí.
Kde se dozvím více o Uživatelském JavaScriptu?
V JavaScriptu nejsem žádný expert, a proto nejlepší věcí, kterou můžu udělat, je nasměrovat vás na webové stránky, kde se o uživatelském JavaScriptu dozvíte mnohem více:
- http://www.opera.com/support/tutorials/userjs/
- Oficální tutoriál k uživatelskému JavaScriptu od Opery
- http://people.opera.com/rijk/opera/
- Rijkova stránka o uživatelském JavaScriptu se sbírkou souborů.
- http://virtuelvis.com/archives/javascript/
- Sbírka tipů a triků k uživatelskému JavaScriptu od Arve Bersvendsena. Arve je také autorem userJS.org
- http://operawiki.info/UserJS
- Opera Wiki databáze a spousta kvalitních odkazů k informacím o uživatelském JavaScriptu.
- http://www.howtocreate.co.uk/operaStuff/userJavaScript.html
- Uživatelský JavaScript na HowToCreate, obsahuje i několik pěkných příkladů.
- http://www.scss.com.au/family/andrew/opera/userjs/
- Stránky Andrew Gregoryho o uživatelském JavaScriptu.
Poznamenejme, že Uživatelský JavaScript v Opeře funguje podobně jako rozšíření Greasemonkey ve Firefoxu (mnoho skriptů pro Greasemonkey bude fungovat i v Opeře, avšak je nutné vzít v potaz některé rozdíly). Před tím, než začnete psát komentáře, že Firefox měl uživatelský JavaScript první a Opera ho okopírovala, vám chci oznámit, že jsem si toho vědom. Avšak my nebudeme FFanatici (jako někteří uživatelé jiného prohlížeče) a nebudeme se snažit dokázat, že vývojáři z Opery objevili všechno první.
Příklady uživatelského JavaScriptu
Místo na výuku JavaScriptu se zde zaměříme rovnou na příklady.
Rychlý test
V našem prvním příkladu vytvoříme uživatelský JavaScript, který změní obsah stavového řádku.
- Spusťte váš oblíbený textový editor (např. Notepad) a vytvořte nový soubor s názvem status.js ve složce pro uživatelské JavaScripty.
- Do souboru status.js vložte následující kód:
window.status = "Uživatelský JavaScript je zapnutý."
Tento řádek JavaScriptu vypíše ve stavovém řádku Opery text "Uživatelský JavaScript je zapnutý." - což může být užitečné např. při ladění skriptů.
Poznámka: Ve skriptu netestujeme adresu stránky a proto se skript připojí ke všem stránkám, které v Opeře otevřete - s výjimkou zabezpečených stránek (protokol https:) a stránek generovaných Operou (adresa začíná slovem opera:). Protože window.status příkaz se provede ihned při načítání stránky, může se obsah stavového řádku změnit na základě dalších instrukcí obsažených ve stránce.
Shockwave.com
Na stránce Shockwave.com je k dispozici pěkná řádka her pro Macromedia Shockwave Player. Abyste si je mohli pustit, musíte mít samozřejmě nainstalován plug-in Shockwave (http://sdc.shockwave.com/shockwave/download/download.cgi).
Naneštěstí skript použitý na Shockwave.com pro ověření přítomnosti Shockwave Player plug-inu nefunguje v Opeře. Můžeme to však napravit!
- Spusťte váš oblíbený textový editor (např. Notepad) a vytvořte nový soubor s názvem shockwave.js ve složce pro uživatelské JavaScripty.
- Do souboru shockwave.js vložte následující kód:
if (location.hostname == "www.shockwave.com") {
document.addEventListener("load",
function() {
if (!game) return;
if (!game.url) return;
for (var i=0; i if (document.links[i].href != "javascript:play(game)") continue;
document.links[i].removeAttribute("onClick");
document.links[i].href = "javascript:window.open('http://www.shockwave.com/contentPlay/download/popup_downloadprompt.jsp?returnurl=" + escape(game.url) + "&id=" + game.keyword + "&width=" + game.winsize[0] + "&height=" + game.winsize[1] + "&site=" + game.site + "', 'asw_d" + (Math.floor(Math.random() * 100000)) + "', 'width=336, height=215');void(0);";
break;
}
},
false);
}
POPIS:
- První řádek skriptu zajistí, že skript se použije pouze na stránce http://www.shockwave.com/.
- Bezejmenná funkce zachycuje událost document.onload.
- Podmínky v naší bezejmenné funkci ověřují existenci objektů game a jeho vlastnosti game.url (objekt game připravili autoři stránky shockwave.com)
- Je-li nalezen objekt game projdeme všechny odkazy na stránce, přičemž se snažíme nalézt oranžové tlačítko "Watch Film", ke kterému je přiřazen odkaz javascript:play(film)
- Když najdeme tento odkaz odstraníme u tlačítka událost onclick a parametru href přařadíme akci pro otevření okna s příslušnou adresou. (Adresu najdeme v souboru http://www.shockwave.com/js/playfilm.js.)
AtomFilms
AtomFilms.com je studnicí nepřeberného množství krátkých filmů a animací vytvořených pro Macromedia Shockwave Player. Avšak co čert nechtěl - i AtomFilms.com připravovali lidé ze Shockwave.com, takže se zde vyskytuje stejná chyba!
- Opět spusťte váš oblíbený textový editor (např. Notepad) a vytvořte nový soubor s názvem atomfilms.js ve složce pro uživatlské JavaScripty.
- Do souboru atomfilms.js vložte následující kód:
if (location.hostname == "www.atomfilms.com") {
document.addEventListener("load",
function() {
if (!film) return;
if (!film.url) return;
for (var i=0; i if (document.links[i].href != "javascript:play(film)") continue;
document.links[i].removeAttribute("onClick");
document.links[i].href = "javascript:window.open('http://www.atomfilms.com/contentPlay/download/popup_downloadprompt.jsp?returnurl=" + escape(film.url) + "&id=" + film.keyword + "&width=" + film.winsize[0] + "&height=" + film.winsize[1] + "&site=" + film.site + "', 'asw_d" + (Math.floor(Math.random() * 100000)) + "', 'width=336, height=215');void(0);";
break;
}
},
false);
}
POPIS:
- První řádek skriptu zajistí, že skript se použije pouze na stránce http://www.atomfilms.com/.
- Bezejmenná funkce zachycuje událost document.onload.
- Podmínky v naší bezejmenné funkci ověřují existenci objektů film a jeho vlastnosti film.url (objekt film připravili autoři stránky atmofilms.com)
- Je-li nalezen objekt film projdeme všechny odkazy na stránce, přičemž se snažíme nalézt oranžové tlačítko "Watch Film", ke kterému je přiřazen odkaz javascript:play(film)
- Když najdeme tento odkaz odstraníme u tlačítka událost onclick a parametru href přařadíme akci pro otevření okna s příslušnou adresou. (Adresu najdeme v souboru http://www.atomfilms.com/js/playfilm.js.)
Udělejte si popcorn a můžete si užívat filmy!
Upozornění
Při tvorbě uživatelských skriptů byste měli brát v ůvahu následující upozornění:
- Uživatelský JavaScript se nenačítá pro zabezpečené stránky (https: protokol)
- Uživatelský JavaScript se nenačítá pro stránky generované Operou (adresy začínající opera:)
- Kód webových stránek se může kdykoli změnit. Následkem toho může skript přestat fungovat - ověřujte, že vámi používáné funkce, objekty a proměnné skutečně existují.
- Používejte podmínky nebo direktivy @include / @exclude, abyste zajistili, že skripty se spustí pouze na požadovaných stránkách. Velké množství skriptů může ovlivnit rychlost načítání stránky, proto je zbytečné je aplikovat na všechny stránky.
- Pokud skriptem vkládáte non-ASCII znaky, připojte skript přes element <script> a použijte atribut charset="" ve značce <script>. Případně můžete použít odkazy na HTML entity nebo si ověřit (a řídit se jím) kódování stránky, pro kterou bude skript použit.
Externí odkazy
Původní článek v originále (anglicky):
http://operalover.tntluoma.com/8/day_10_user_javascript