Jak vložit obsah souboru pomocí JavaScriptu?

19. října 2000

•

Určitě znáte direktivu Include, pomocí které můžete snadno zobrazit obsah jednoho souboru ve více stránkách. Nefunguje to ovšem v případě, když potřebujete ve stránce zobrazit obsah souboru, který je umístněn na jiném serveru. Tento problém docela dobře řeší v HTML plovoucí rám (iFrame), který ale nefunguje v Netscape. A co takhle použít velmi jednoduchý JavaScript?

Mnoho českých serverů nabízí pro vaše stránky soubor, který obsahuje například pět nejnovějších článků v jednoduché textové formě. Vám stačí, když si tento soubor stáhnete – nejlépe automaticky a pak si jej musíte vlastním skriptem upravit do podoby designu vašeho webu. Automatické stažení souboru ovšem není žádná trivialita – zvláště pro lidi, kteří nemají doménu na vlastním serveru, navíc je nutná podpora ASP nebo PHP pro úpravu vzhledu. Na druhou stranu, některé servery nabízejí už přímo vytvořený HTML kód s nejaktuálnějšími články, který stačí bez jakýchkoliv úprav vložit do vaší stránky. To už můžete dělat ručně anebo použít v úvodu zmiňovaný iframe s tím, že uživatelé Netscape budou mít smůlu. Ale je tu ještě jedno řešení – JavaScript, který si na straně dodavatele vyžádá pouze malou úpravu.

Javascript se nemusí zdát jako lepší řešení než iFrame. Javascript funguje i v Netscape, na druhou stranu je možné ho jednoduše vypnout. Plovoucí rám iFrame není možné vypnout, ale zase nefunguje od počátku v Netscape až do současné verze 4.73. Jak tedy pokračovat dál? Možná bude lepší oba způsoby zkombinovat dohromady.

Pokud se alespoň trošičku vyznáte v Javascriptu, víte, že tag u <script> můžete použít volitelný parametr SRC, který se používá pro vkládání externího javacriptu do stránky. Jeho syntaxe je následující:

Někteří webmasteři pomocí tohoto způsobu vkládají do stránky všechny své JavaScripty, protože je taková minimální „ochrana“ před tím, aby uživatel totálně neznalý Javascriptu nemohl zkopírovat vás skript k sobě a použít je u sebe. Člověka alespoň trochu znalého to ovšem nezastaví – stačí, když adresu k souboru s Javascriptem vloží do prohlížeče a soubor si stáhne k sobě :) My ovšem tímto způsobem nebudeme vkládat Javascript, ale samotný obsah nějakého html souboru.

Ale nyní k tématu článku. Budeme potřebovat dva soubory. V jednom budeme mít náš jednoduchý Javascript a ve druhém souboru bude třeba text a který budeme zobrazovat v prvním souboru:

První soubor:

Druhý soubor

<center><b>*Toto je text, který se vloží do stránky*</b></center>

Pokud to hned teď vyzkoušíte, zjistíte, že prohlížeč vám ohlásí chybu v Javascriptu. Problém je v tom, že ve vloženém souboru je „obyčejné“ HTML a prohlížeč očekává v tomto souboru alespoň nějaké prvky Javascriptu. Jak to tedy vyřešit? Jednoduše, náš text, který chceme zobrazit, vložíte do konstrukce document.write, která text mezi závorkami a uvozovkami jednoduše vypíše:

document.write = („<center><b>*Toto je text, který se vloží do stránky*</b></center>“)

A že to opravdu funguje, se můžete přesvědčit zde (je nutná podpora JavaScriptu):

Obsah druhého souboru nesmí samozřejmě obsahovat tagy jako <html>, <title>, <body> nebo například chybné ukončení tabulky apod. V takovém případě se může spolehlivě zlikvidovat design toho, kdo si tento soubor vloží na své stránky.

Takže na tomto místě bych rád shrnul výhody a nevýhody tohoto způsobu:

Na straně klienta je nutné mít povoleno aktivní skriptování.
Nutnost generovat dvě verze souboru – jednu pro uživatele, kteří jsou schopni zajistit automatické stahování souboru či jej stahují ručně a druhou verzi pro uživatele, kteří soubor vkládají pomocí Javascriptu (ve vkládaném souboru obsah vypsán pomocí document.write)

Kombinace JavaScriptu a iFrame.

Nyní si vytvoříme poněkud jiné řešení, ve kterém zkombinujeme Javascript a plovoucí rám iFrame. Takové řešení už je docela propracované, může si jej vytvořit každý a bude fungovat u naprosté většiny uživatelů. Aby to totiž nefungovalo, musel by mít uživatel prohlížeč Netscape s vypnutým skriptováním a nebudu snad daleko od pravdy, když řeknu, že to je takových deset, dvacet procent uživatelů Netscape, který má na trhu prohlížečů asi 10% podíl.

Ale zpět k praktickým záležitostem. Nyní budeme potřebovat tři soubory. V prvním souboru bude kombinace Javascriptu a iFrame (stránka, kde se bude obsah objevovat), ve druhém souboru bude obsah pro Javascriptovou verzi (document.write) a v souboru třetím bude obsah pro iFrame verzi (normální HTML):

První soubor:

Kód je myslím jasný – pokud má uživatel povolený Javascript či je prohlížečem podporován, objeví se ve stránce obsah souboru soubor.htm, pokud ho povolený nemá, načte se mu obsah ze souboru soubor2.htm. Pokud nemá prohlížeč povolený Javascript a nepodporuje iFrame, neobjeví se mu bohužel nic.

Druhý soubor:

document.write = („<center><b>*Toto je text, který se vloží do stránky*</b></center>“)

K obsahu druhého souboru není potřeba nic dodávat. Vše bylo popsáno již výše.

Třetí soubor:

<center><b>*Toto je text, který se vloží do stránky pomoc iFrame*</b></center>

Třetí soubor obsahuje klasické HTML, je tedy současně vhodný i pro ruční či automatické stažení a následné vložené do stránky. A nyní ukázka, jak to všechno funguje:

Pokud máte náladu experimentovat, skočte v Internet Exploreru do menu Nástroje – Možnosti sítě Internet, záložka Zabezpečení a zde si nastavte pro Zónu sítě Internet vlastní úroveň zabezpečení a vypněte vše, co souvisí s aktivním skriptováním. Pak stačí obnovit tuto stránku a nyní se text nevloží pomocí JavaScriptu, ale pomocí iFrame.

Shrnutí hlavních bodů

Pokud chcete mít na svém vlastním webu výpis třeba pěti nejaktuálnějších článku daného serveru a nejste schopni zajistit automatické stahování souboru, či jste příliš líní na to, aby jste ho tahali každý den přes prohlížeč, zkuste tuto cestu. Verze pro JavaScript si sice vyžádá menší úpravu daného souboru, či spíše vytvoření souboru nového (nezapomeňte, že obsah souboru musí být uveden v document.write, jinak vám Javascript vyhodí chybovou hlášku), ale pro velké weby to není problém hned udělat.

Pokud byste měli zájem, můžete si zde stáhnout všechny tři zdrojové soubory.