Reszponzív beágyazás

A beágazott iframe méretét a beágyazó oldal dinamikusan módosíthatja.

A szélesség változtatására a beágyazott modul reagál és 400 pixel szélesség fölött végig minden funkciója elérhető. Ajánlott legalább 430px szélességet használni.

Ha a tartalom függőlegesen nem fér el, vertikális görgetősáv jelenik meg.

Dinamikus magasságállítás

Mivel iframe használatakor a beágyazó és a beágyazott oldalakat egymástól függetlenül kezelik a böngészők, a beágyazó oldal csak az iframe elemet érzékeli és nem tud dinamikusan annak tartalmához igazodni.

Hogy ezt elérjük, a modul minden alkalommal amikor annak tartalma változik egy speciális üzenetet küld a beágyazó oldalnak postMessage() segítségével. Ezt a bágyazó oldal feldolgozhatja és és átállíthatja az iframe magasságát.

Az alábbi Javascript példakód segíthet ennek implementálásában:

(function (iframeSelector, expectedOrigin) {
    function receiveMessage(event) {
        var iframe = document.querySelector(iframeSelector);
        if (!iframe) {
            console.error('iframe not found.');
            return;
        }

        if (event.origin !== expectedOrigin) {

Kompatibilitás

IE10+ kompatibilis kódrészlet.
IE8 kompatibilitáshoz a console használatát kell csak törölni vagy átalakítani és IE8 által támogatott selector-t használni.

Quickrisk (Magyar): Beágyazás

Quickrisk (Magyar): Fejlesztő Eszközök