Konfiguration

Um das IFrame Control zu konfigurieren, gibt es einen Parameter:

Src:

Der Src dient zur Einstellung der Web-Adresse die aufgerufen werden soll.

TwinCAT HMI in einem IFrame

Wenn sie die Seite eines anderen TwinCAT HMI Servers im IFrame anzeigen möchten, besteht die Möglichkeit über Messages Info an den Client zu senden. Dies kann interessant sein, um den Splash Screen zu deaktivieren, das Theme oder die Sprache umzuschalten.

Message:

Attribute	Beschreibung
'System.hideSplashScreen'	Mit System.hideSplashScreen wird der Ladebildschirm (SplashScreen) unterdrückt. Hierdurch wirkt die eingebettete TwinCAT HMI nicht wie ein Fremdkörper.
'Theme.set'	Mit Theme.set wird der Theme im eingebeteten TwinCAT HMI auf den angegebenen Wert geändert. Hierdurch kann die TwinCAT HMI in einem zur Hauptseite entsprechenden Theme angezeigt werden und nicht nur im Default.
'Locale.set'	Mit Local.set wird die Sprache im eingebetteten TwinCAT HMI auf den angegebenen Wert geändert. Hierdurch lässt sich die TwinCAT HMI an die Sprache der Hauptvisualisierung anpassen.

Beispiel:

// get the iframe control
let someControl = TcHmi.Controls.get('TcHmiIFrame');
if (someControl !== undefined) {
    // get the iframe element
    let iFrameElement = someControl.getElement()[0].querySelector("iframe");
    if (iFrameElement) {
        const postMessageSender = (event) => {
            if (!event.data?.messageType) {
                return; // No tchmi answer. perhaps react devtools?
            }
            // hide splash screen
            iFrameElement.contentWindow.postMessage(
                {
                    messageType: 'System.hideSplashScreen',
                },
                "*",
            );
            // set theme with the active theme
            iFrameElement.contentWindow.postMessage(
                {
                    messageType: 'Theme.set',
                    themename: TcHmi.Theme.get()
                },
                '*'
            ); 
            // set locale with the active locale
            iFrameElement.contentWindow.postMessage(
                {
                    messageType: 'Locale.set',
                    locale: TcHmi.Locale.get()
                },
                '*'
            );
            // remove event
            window.removeEventListener("message", postMessageSender);
        };
        // add event on message, checked the state of the other side
        window.addEventListener("message", postMessageSender);
    }
}