[SOLVED] Using Iframe as UI window?

Help & Support
8

This does looks really interesting!

However, the way I have done so I can have a proper 2D screen is making an HTML with two iframes, one that hold the paint screen, and one that holds the playcanvas html, and with a class of enabled and disabled at the CSS I can set the display to none in which I dont want to be displayed and vice-versa.

The solution I made was like this one I posted on another thread , where I send a message to the parent website, then make the parent website send a message to playcanvas’ iframe to stop displaying the paint screen and return to the game.

index.html:

<!doctype html>
<html>
<head>
   <script src="js/libs/jquery-3.4.1.min.js"></script>
   <script src="js/index.js"></script>
   <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- loadscreen is a black panel that shows half a second, cause the paint canvas has to be displayed right away for the canvas object inside to be rendered properly... !-->
    <div id='iframes-container'>
    <iframe id="paintscreen" class='paint-screen enabled' src="https://primo.com.br/clientes/2021/testes/paint/"></iframe>
    <iframe id="loadscreen" class="blackscreen enabled"></iframe>  
    <iframe id="gamescreen" class='playcanvas-game disabled' src="game.html"></iframe>
    </div> 
</body>
</html>

index.js:

var iframe;

$(function(){
    ListenMessages();
    HideLoadingScreen();
})

function ActivatePlaycanvas()
{
    $("#paintscreen").removeClass("enabled");
    $("#paintscreen").addClass("disabled");

    $("#loadscreen").removeClass("enabled");
    $("#loadscreen").addClass("disabled");

    $("#gamescreen").removeClass("disabled");
    $("#gamescreen").addClass("enabled");
}
function DeactivatePlaycanvas()
{
    $("#paintscreen").addClass("enabled");
    $("#paintscreen").removeClass("disabled");

    $("#gamescreen").addClass("disabled");
    $("#gamescreen").removeClass("enabled");
}
function PostMessage(c)
{
    iframe = document.getElementById("gamescreen");
    iframe.contentWindow.postMessage({
        content: c,
    }, "*");
}
function ListenMessages()
{
    //This script stays inside the .js located in the parent website.
    window.onmessage = function(e)
    {
        // alert("message recieved in parent window: " + e.data.content + " from origin: " + e.origin);

        switch(e.data.content)
        {
            case "openPaint":
                {
                    DeactivatePlaycanvas();
                }
                break;
            case "closePaint":
                {
                    PostMessage('closePaint');
                    ActivatePlaycanvas();
                }    
                break;
        }
    }
    console.log("listener for parent window has been registered.");
}

function HideLoadingScreen()
{
    console.log("hiding in progress");
    setTimeout(() =>{
        ActivatePlaycanvas();
    }, 500);
}

and style.css:

.enabled
{
    position: fixed;
    width: 100%;
    height: 100%;
}
.blackscreen
{
    background-color: black;
}
.disabled
{
    display: none;
}
#iframes-container
{
    position:fixed;
    width:100%;
    height:100%;
    margin: 0px;
    top:0px;
    left:0px;
}

Maybe it’s not the most sofisticated, but it seems to work just fine. :sweat_smile:

2 Likes