Jak pomocí JavaScriptu nahradit příkaz INCLUDE

Užitečný příkaz INCLUDE znají především ti, kdo měli příležitost přijít do styku s ASP. Jeho funkce tkví v tom, že vloží obsah jednoho souboru do druhého. Ve většině případů ale není na serveru technologie ASP podporována, a tudíž příkaz INCLUDE není možné použít.
Užitečný příkaz INCLUDE znají především ti, kdo měli příležitost přijít do styku s ASP. Jeho funkce tkví v tom, že vloží obsah jednoho souboru do druhého – praktickým příkladem budiž například výpis aktuálních článků, jež se objevuje na každé stránce většiny informačních serverů. V takovém případě bývá zvykem, že seznam aktuálních článků je uložen v jednom jediném souboru a je vkládán do všech stránek direktivou <!--#include file="vkladany_soubor"-->. Pokud kdykoli změníte obsah vkládaného souboru, projeví se tato změna na všech stránkách.

Ve většině případů ale není na serveru technologie ASP podporována (platí zejména pro "zadarmové" poskytovatele webhostingu), a tudíž příkaz INCLUDE není možné použít. Jak to vyřešit? Ukážeme vám způsob, který jsme použili na jednom nejmenovaném serveru pro výpis aktuálních článků daného dne. Využili jsme možnosti JavaScriptu, který je podporován prakticky všemi prohlížeči a nevyžaduje žádnou podporu ze strany serveru.

Nuže, začněme souborem, který chceme vkládat do všech stránek – nazvěme ho například vkladany.js. Ten bude obsahovat příkaz document.write zajišťující vypsání textu do aktuálního dokumentu, který bude následován textem uzavřeným v závorkách a apostrofech. V tomto textu je možné používat většinu HTML tagů a znaků – naopak nepochodíte se znakem "apostrof", který skript chápe jako uzavření textu, a nalezne-li za ním jakýkoli jiný text, vygeneruje chybu. Zdrojový kód vkladany.js může například vypadat takto:

document.write(`<b><a href="http://www.seznam.cz/">Seznam.cz</a></b> - vyhledávač<br><b><a href="/">Živě.cz</a></b> - zpravodajství ze světa IT<br><b><a href="http://www.soa.kvalitne.cz/">SOA</a></b> - zajímavé služby<br>`)

Jak sami vidíte, jedná se vlastně o www stránku bez uváděcích značek HTML, HEAD a BODY zapsanou do jednoho řádku. V naší ukázce jde o stránku, kde se na třech řádcích zobrazí hyperlinkové odkazy s komentářem.

Nyní nastává krok druh: vložení obsahu souboru vkladany.js do stránky (respektive do stránek). To je velice jednoduché – na dané místo prostě vložíte následující kód:

<script language="javascript" src="vkladany.js"></script>

Ten prohlížeči sděluje, že má provést skript JavaScriptu, který je uložen v souboru vkladany.js, kde, jak již víme, je příkaz document.write. Prohlížeč tedy vyvolá soubor vkladany.js a vypíše do aktuálního dokumentu vše, co je určeno příkazem document.write – v našem případě tedy tři výše zmíněné odkazy. Změníte-li obsah souboru vkladany.js, změní se i to, co bude vloženo na stránky volající tento soubor.

Pokud tedy vložíte příkaz <script language="javascript" src="vkladany.js"></script> do všech stránek, bude se na všech stránkách zobrazovat obsah souboru vkladany.js. Rozdíl mezi příkazem INCLUDE a zmíněným postupem je, že v případě použití INCLUDE je do stránky skutečně vkládán kód vkládaného souboru (lze jej tedy například vidět v režimu prohlížení zdrojového kódu a zobrazuje se i v off-line režimu po uložení stránky na disk), zatímco při použití JavaScriptu se obsah vkládaného souboru pouze zobrazí na stránce, ovšem není její součástí (v režimu zobrazení zdrojového kódu uvidíte stále jen příkaz JavaScriptu a při uložení stránky na disk se obsah vkládaného souboru nezobrazí, neboť chybí soubor vkladany.js). Další nevýhodou je skutečnost, že příkaz SCRIPT je možné vložit pouze do těla stránky (tedy mezi elementy BODY), zatímco INCLUDE lze vkládat prakticky kamkoli (využitelné například pro definici hlavičky stránky).

Základní účel, tedy zobrazení obsahu souboru na každé stránce serveru, je ale splněn a lze jej považovat za postačující řešení. Ostatně fantazii se meze nekladou a vzhledem k tomu, že počet vkládaných souborů není nijak omezený, můžete si takto například vyrobit kompletní navigaci na vašich stránkách.

Kompletní zdrojový kód si můžete stáhnout zde.

Diskuze (39) Další článek: Intel a AMD zřejmě půjdou do příměří

Témata článku: , , , , , , , , ,