Configuration

There is one parameter for configuring the IFrame control:

Src:

The Src is used to set the web address to be called up.

TwinCAT HMI in an IFrame

If you want to display the page of another TwinCAT HMI server in the IFrame, you have the option of sending information to the client via messages. This can be useful for disabling the Splash Screen or changing the theme or language.

Message:

Attributes	Description
'System.hideSplashScreen'	The Splash Screen is hidden with System.hideSplashScreen. This means that the embedded TwinCAT HMI does not appear to be a foreign element.
'Theme.set'	Theme.set is used to change the theme in the embedded TwinCAT HMI to the specified value. This allows the TwinCAT HMI to be displayed in a theme corresponding to the main page and not just the default.
'Locale.set'	Local.set is used to change the language in the embedded TwinCAT HMI to the specified value. This allows the TwinCAT HMI to be adapted to the language of the main visualization.

Sample:

// 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);
    }
}