cancel
Showing results for 
Search instead for 
Did you mean: 
SOLVED

Node-RED iframe in a Node-RED template

Node-RED iframe in a Node-RED template

Venzi_
Established Member

Hello,

is it possible to embed the Node-RED ui into a Node-RED template?

This is what I'm trying:

Venzi__0-1710417088755.png

Venzi__1-1710417159096.png

 

4 REPLIES 4

Sgilk
Contributor

Hello @Venzi_ ,

I'm a little confused what you are trying to do here. You want to embed the entire UI generated in your Node-RED flow into an iframe that is itself part of that UI? Would that not create an infinite recursion of iframes inside of iframes?

Venzi_
Established Member

Hello @Sgilk,

the page containing the iframe is genarated by a template node and do not include the entire Node-RED UI.

My idea is to create a more comfortable access to the Node-RED UI from e.g. mobile phone. For this, I want to avoid the Node-RED navigation bar, which cannot be hidden dynamically (so far I know), but can be disabled for an iframe view.

In my case no website at all can be shown inside of the iframe. I guessed, this is because of the template node or any CtrlX specific settings. I don't use a template widget in order to stay outside the Node-RED UI.

@Venzi_ ,

There are possible issues with X-frame-options here, so the URL structure and requested resource are important.

Ex. "chromewebdata/:1 Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'."

Try something like this in your template node... I found you need to specify the entire URL, including device IP address. This is displaying my standard Node-RED dashboard (/node-red/ui) in an iframe at /node-red/ui/mobile.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile UI</title>
</head>
<body>
    <div>
        <iframe style="width:500px; height:500px;" src="https://127.0.0.1:8443/node-red/ui/" frameborder="0" allowfullscreen></iframe>
    </div>
</body>
</html>

Venzi_
Established Member

It worked. Thank you, @Sgilk!

Icon--AD-black-48x48Icon--address-consumer-data-black-48x48Icon--appointment-black-48x48Icon--back-left-black-48x48Icon--calendar-black-48x48Icon--center-alignedIcon--Checkbox-checkIcon--clock-black-48x48Icon--close-black-48x48Icon--compare-black-48x48Icon--confirmation-black-48x48Icon--dealer-details-black-48x48Icon--delete-black-48x48Icon--delivery-black-48x48Icon--down-black-48x48Icon--download-black-48x48Ic-OverlayAlertIcon--externallink-black-48x48Icon-Filledforward-right_adjustedIcon--grid-view-black-48x48IC_gd_Check-Circle170821_Icons_Community170823_Bosch_Icons170823_Bosch_Icons170821_Icons_CommunityIC-logout170821_Icons_Community170825_Bosch_Icons170821_Icons_CommunityIC-shopping-cart2170821_Icons_CommunityIC-upIC_UserIcon--imageIcon--info-i-black-48x48Icon--left-alignedIcon--Less-minimize-black-48x48Icon-FilledIcon--List-Check-grennIcon--List-Check-blackIcon--List-Cross-blackIcon--list-view-mobile-black-48x48Icon--list-view-black-48x48Icon--More-Maximize-black-48x48Icon--my-product-black-48x48Icon--newsletter-black-48x48Icon--payment-black-48x48Icon--print-black-48x48Icon--promotion-black-48x48Icon--registration-black-48x48Icon--Reset-black-48x48Icon--right-alignedshare-circle1Icon--share-black-48x48Icon--shopping-bag-black-48x48Icon-shopping-cartIcon--start-play-black-48x48Icon--store-locator-black-48x48Ic-OverlayAlertIcon--summary-black-48x48tumblrIcon-FilledvineIc-OverlayAlertwhishlist