Is it possible to add an iframe inside a Babylon GUI?

Questions
1

Hi,
Is it possible to add an iframe inside a Babylon GUI

sampleimage
sampleimage1152×648 4.3 KB

something like this.

2

I have done something similar which, depending on your scenario, may work for you.
Rather than thinking about embedding a DOM element (iframe or otherwise) you might be able to overlay it. Thats what i did. I had a rectangle on the gui which i could get to coords and size from onAfterDraw and then adjust the DOM element to match and give it a higher z-index. This way you can have complete interaction with the iframe.
It works for fullscreen guis but not for a gui on a mesh or in XR.

2 Likes
3

I was able to do it after downloading the project. Since it will be in HTML5 format, it is easy to add an iframe. But I think its not possible to do in within a playground.

4

Hi,
Thanks for the reply. Any reference link/ playground could be much appreciated to try it out.

5

When you download a Babylon.js project, it will be in the format as given below:

...
...
<style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>

<body>
<canvas id="renderCanvas"></canvas>
    <script>
        var canvas = document.getElementById("renderCanvas");
        ....

So you can add a script tag before your <canvas id="renderCanvas"></canvas> tag such as

    <iframe id="iframe_custom" style="
                   position: fixed;
                   opacity: 0;
                   top: 0;
                   bottom: 0;
                   left: 0;
                   right: 0;
                   margin: auto;
                   height: 50%;
                   width: 50%;
                   overflow: hidden;
                   z-index: 10;
                   display: none;
                   ">
    </iframe>

Here, the iframe is set to half the size of the browser window placed in the center. The display of the iframe is set to none, so lets assume you activate the iframe with a Babylon.js button, reference that button to a function such as:

function Activate_iframe() {

                //iframe start
                let iframe = document.getElementById("iframe_custom");

                iframe.src = "LINK TO WEBSITE";
                iframe.style.display = 'Block';

}

Hope this helps.

3 Likes