Vkládání školení do vlastních stránek

|

Možností jak vkládat obsah nějakého serveru do stránek jeho uživatelů je více. Nejčistší mi vždycky připadalo vkládání obsahu javascriptem přímo do cílového dokumentu, jak to dělá například Twitter u zobrazování posledních tweetů.

Další možnost je trochu více historická, ale bohužel pro některé případy stále nutná. Jsou to iframy.

Vkládání obsahu z jiných stránek je v prohlížečích z bezpečnostních důvodů omezeno zejména takzvanou Same origin policy. Ta se uplatňuje při pokusu načíst obsah z jiného zdroje. Nicméně na určité typy obsahu se nevztahuje, například na javascript. V případě iframu se obsah načte téměř odkudkoliv, ale prohlížeč zamezí až případnému přístupu z iframu do dokumentu, který ho obsahuje, nebo naopak.

Javascript a JSONP

Jak už jsem psal v úvodu, nejsympatičtější je mi vkládání obsahu javascriptem přímo do dokumentu.

Ajaxové volání pro získání dat k zobrazení bude zablokováno pro porušení Same origin policy. Kromě jiných řešení se používá načtení dat pomocí JSONP. Jedná se o JSON obsah obalený voláním javascriptové funkce, která je v okamžiku stažení již definovaná a zajistí vložení předaných dat. Tento způsob používá například Twitter nebo Flickr.

V případě, kdy chceme klientovi zobrazit obsah s vlastním stylem a vzhledem, který se liší od jeho, narazíme na problém s ovlivňováním mezi samotným dokumentem a vkládaným obsahem. Nejjistější oddělení vkládaného obsahu od dokumentu je přes rámec, tzv. iframe.

Příklad seznamu školení pro vložení do stránky klienta

Iframe a HTML5 Message

Při vložení iframe do stránky není problém s jeho načtením, nicméně musí být zadána jeho velikost. To může být problém v případě, kdy se jeho velikost mění (například seznam vypsaných školení může být různě dlouhý). Při pokusu javascriptem zjistit velikost dokumentu v iframu a nastavení jeho velikosti narazíme na uplatňování Same origin policy.

Naštěstí v HTML5 existuje mechanismus pomocí kterého si mohou rámy (tedy například iframe s hlavní stránkou) posílat zprávy bez ohledu na Same origin policy. Jedná se o poměrně nové řešení, pro víc informací doporučuji https://developer.mozilla.org/en/DOM/window.postMessage a http://davidwalsh.name/window-iframe.

Formulář pro vygenerování kódu pro vkládání školení je umístěn v administraci vašeho profilu, záložka HTML kód.

Co používáme na NAUC.cz?

Na NAUC.cz je možné vygenerovat kód pro vložení seznamu školení do svých stránek.

Protože chceme, aby seznam školení vypadal vždy stejně a to tak, aby korespondoval se stylem NAUC.cz, použili jsme iframe. Nicméně ten je vkládán pomocí javascriptu, který také zajišťuje správné přizpůsobení jeho velikosti k jeho obsahu.

Narazili jste na nějaké problémy při vkládání školení do svých stránek nebo máte lepší řešení? Podělte se o něj v komentářích :-)

Komentáře nejsou povoleny.