Wie binde ich Assist in einem iFrame ein?

Dieser Artikel beschreibt, wie Assist korrekt in einer Website eingesetzt wird, die Inhalte über ein iFrame lädt. Dabei wird erklärt, welche Voraussetzungen erfüllt sein müssen und wie die notwendige Code-Integration im iFrame sowie im Parent Frame erfolgt.

Ergänzende Informationen zum grundsätzlichen Verhalten von Assist bei eingebetteten Inhalten finden Sie in folgendem Artikel:

Wie geht Eye-Able Assist mit eingebetteten Seiten (iFrames) um?

Voraussetzungen

Assist muss sowohl auf der Hauptseite (Parent Frame) als auch auf der im iFrame geladenen Seite eingebunden sein.
Handelt es sich bei Hauptseite und der im iFrame geladenen Seite um unterschiedliche Domains, muss für jede Domain eine eigene Assist-Lizenz vorliegen.
Der hier beschriebene Code wird zusätzlich zum regulären Assist-Einbindungscode verwendet.
Der jeweilige Code muss nach dem Assist-Einbindungscode integriert werden.

Code-Integration im iFrame

Der folgende Code wird auf der Seite eingebunden, die innerhalb des iFrames geladen wird:

<script>
    //----------------Script inside of the iFrame-------------------------------
    document.addEventListener("eyeable:init_completed", function () {
        function inIframe () {
            try {
                return window.self !== window.top;
            } catch (e) {
                return true;
            }
        }
 
        if(inIframe()) {
            //hide the Eye-Able icon and toolbar when in an Iframe
            document.getElementById("eyeAble_container_ID").style.display = "none";
 
            //listen for messages from the parent website that Assist was updated
            window.addEventListener('message', (event) => {
                if(event.data && event.data.includes("topPosition")) {
                    //update the settings from the parent website
                    let newSettings = JSON.parse(event.data);
                    newSettings.bluefilterSet = "0"; //disable blue filter or it gets double applied
                    eyeAble_updateSettingsFromStruct(newSettings);
 
                    if(newSettings.eyeAble_Font_Family !== "0") {
                        eyeAble_setFontFamily(eyeAble_defaultCssVars["--font-family"]);
                    } else {
                        eyeAble_resetFontFamily();
                    }
 
                    if(newSettings.SpeechOutput === "1" && eyeAbleTTS.getActive() === false) {
                        eyeAble_pluginLocalConfig.blockScreenreaderIntro = true;
                        eyeAbleWebsiteNav.toggleNavWithSpeech();
                        eyeAble_shadowRoot.getElementById("screenreaderControllerID").style.display = "none";
                    } else if(newSettings.SpeechOutput === "0" && eyeAbleTTS.getActive() === true) {
                        eyeAbleWebsiteNav.toggleNavWithSpeech()
                    }
 
                    if(newSettings.BigCursor === "1" && eyeAble_getVar("BigCursor") === "0") {
                        eyeAble_toggleBigCursor();
                    } else if(newSettings.BigCursor === "0" && eyeAble_getVar("BigCursor") === "1") {
                        eyeAble_toggleBigCursor();
                    }
                }
            });
            console.log("Eye-Able is running in an iframe");
        }
    });
</script>

Code-Integration im Parent Frame

Der folgende Code wird auf der Hauptseite (Parent Frame) eingebunden, die das iFrame enthält:

<script>
    //----------------Script in parent frame-------------------------------
    function eyeAbleNotifyIFrames() {
        //send a message with the new object to all iframes on the page
        let iframes = document.getElementsByTagName('iframe');
        for (let i = 0; i < iframes.length; i++) {
            //short delay to make sure Assist finished processing
            setTimeout(() => {
                iframes[i].contentWindow.postMessage(window.localStorage.getItem("eyeAbleVariables"), '*');
            }, 400);
        }
    }
 
    document.addEventListener("eyeable:event", () => {
        eyeAbleNotifyIFrames();
    });
    document.addEventListener("eyeable:init_completed", () => {
        eyeAbleNotifyIFrames();
    });
</script>

Ergebnis nach der Code-Integration

Assist wird im iFrame ausgeblendet (Icon und Toolbar sind nicht sichtbar).
Alle Assist-Funktionen (z. B. Einstellungen, Darstellungsoptionen, Sprachfunktionen) werden auch im iFrame angewendet.
Änderungen der Assist-Einstellungen auf der Hauptseite werden automatisch an alle iFrames übertragen.

Wichtige Hinweise

Beide Code-Teile sind erforderlich, damit die Assist-Einstellungen korrekt zwischen Hauptseite und iFrame synchronisiert werden.
Der Code darf nicht vor dem Assist-Einbindungscode eingebunden werden.
Ohne Assist-Integration auf beiden Seiten kann die Funktionalität im iFrame nicht gewährleistet werden.