Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. Unite 2023 Registrations are now LIVE! We are thrilled to announce that Unite 2023 Registration is now live and open for all!
    Dismiss Notice
New Forum User Notice Unite 2023 Registrations are now LIVE!

WEbGL Iframe

Discussion in 'WebGL' started by lblast, Jun 11, 2018.

  1. lblast

    lblast

    Joined:
    Dec 1, 2016
    Posts:
    66
    Hello,

    I am using Unity 5.6.3p1 and currently have a successful WebGL build. What I'm trying to accomplish is to create an iframe that will exist within my game (it navigates to specific game URLs that we launch).

    My current knowledge of iframes isn't that great, but I have the following in a .jslib file. It works to open the iframe and navigate there, but I don't know how to pass it messages or keep a reference to the iframe itself.

    Any help is appreciated, thanks!

    Code (JavaScript):
    1. var IframePlugin = {
    2.       iframeClick: function(str) {
    3.         if (!document.getElementById('webview')) {
    4.           var ifrm = document.createElement("iframe");
    5.           ifrm.setAttribute("src", Pointer_stringify(str));
    6.           ifrm.setAttribute("id", "webview");
    7.           ifrm.style.border = "0px #000000 none";
    8.           ifrm.style.width = "640px";
    9.           ifrm.style.height = "480px";
    10.           document.body.appendChild(ifrm);
    11.         }
    12.       }
    13.     };
    14.     mergeInto(LibraryManager.library, IframePlugin);
    This kind of works, except that it appears behind my Unity game, its not at the correct position, and I don't know how to send the iframe messages or javascript to execute.
     
    lblast, Jun 11, 2018
    #1

  2. lblast

    lblast

    Joined:
    Dec 1, 2016
    Posts:
    66
    I have modified my implementation but I still have similar problems.

    Code (JavaScript):
    1.  
    2. var IframePlugin = {
    3.  
    4.       IframeCreate: function(x, y, width, height) {
    5.         if(!document.getElementById('webview')) {
    6.           var ifrm = document.createElement('iframe');
    7.           ifrm.setAttribute('id', 'webview');
    8.           ifrm.setAttribute('src', 'about:blank');
    9.           ifrm.style.border = 'none';
    10.           ifrm.style.width = width + 'px';
    11.           ifrm.style.height = height + 'px';
    12.           ifrm.style.z-index = 9999;
    13.           document.body.appendChild(ifrm);
    14.  
    15.           console.log('Created webview: ' + document.getElementById('webview'));
    16.         }
    17.       },
    18.  
    19.       IframeLoadURL: function(str) {
    20.    
    21.         var ifrm = document.getElementById('webview');
    22.  
    23.         if (ifrm !== null) {
    24.           ifrm.setAttribute('src', Pointer_stringify(str));
    25.         }
    26.         else {
    27.           console.log('Iframe does not exist.');
    28.         }
    29.       },
    30.  
    31.       IframeExecuteJS: function(script) {
    32.         var ifrm = document.getElementById('webview');
    33.  
    34.         if (ifrm !== null) {
    35.           console.log("POST: " + JSON.stringify(script));
    36.           ifrm.contentWindow.postMessage(JSON.stringify(script), "*");
    37.         }
    38.         else {
    39.           console.log('Iframe does not exist when executing JS.');
    40.         }
    41.       },
    42.  
    43.     };
    44.  
    45. // Bring into Unity
    46. mergeInto(LibraryManager.library, IframePlugin);
    47.  
     
    Last edited: Jun 12, 2018
    lblast, Jun 12, 2018
    #2

  3. nsmith1024

    nsmith1024

    Joined:
    Mar 18, 2014
    Posts:
    869
    Are you trying to show a webpage inside WebGL?

    Did you get it to work?

    What problem do you have still (if any)?
     
    nsmith1024, Jul 13, 2019
    #3

  4. kou-yeung

    kou-yeung

    Joined:
    Sep 5, 2016
    Posts:
    30
    i make a sample to test postMessage with plain javascript.
    here is the code

    // index.html
    Code (JavaScript):
    1. <head>
    2.     <script>
    3.         function onClick(url)
    4.         {
    5.             const game = document.getElementById('game');
    6.             const rect = game.getBoundingClientRect();
    7.            
    8.             const iframe = document.createElement('iframe');
    9.             iframe.id = 'iframe';
    10.             // overlay on canvas. and set the size same it!
    11.             iframe.style.position = "absolute";
    12.             iframe.style.top = rect.top + 'px';
    13.             iframe.style.left = rect.left + 'px';
    14.             iframe.style.width = rect.width + 'px';
    15.             iframe.style.height = rect.height + 'px';
    16.             // no border for iframe
    17.             iframe.style.border = '0px';
    18.             // set url to show in iframe
    19.             iframe.src = url;
    20.             // add it to canvas parent node.
    21.             game.parentNode.appendChild(iframe);
    22.         }
    23.         function onPost()
    24.         {
    25.             const iframe = document.getElementById('iframe');
    26.             iframe.contentWindow.postMessage('index -> iframe', '*');
    27.         }
    28.  
    29.         window.addEventListener('message', e =>{
    30.             console.log(e);
    31.         });
    32.     </script>
    33. </head>
    34. <body>
    35.     <canvas id="game" width="600px" height="300" style="border: 1px solid red">
    36.     </canvas>
    37.     <button onclick="onClick('./iframe.html');">OPEN</button>
    38.     <button onclick="onPost();">POST</button>
    39. </body>
    // iframe.html
    Code (JavaScript):
    1. <head>
    2.     <script>
    3.         var origin = undefined;
    4.  
    5.         function onClick(url)
    6.         {
    7.             window.parent.postMessage('iframe -> index', '*');
    8.         }
    9.         window.addEventListener('message', e =>{
    10.             console.log(e);
    11.         });
    12.  
    13.     </script>
    14. </head>
    15. <body>
    16.     <div>iframe!!</div>
    17.     <button onclick="onClick()">SEND</button>
    18. </body>
     
    kou-yeung, Jul 16, 2019
    #4

  5. kou-yeung

    kou-yeung

    Joined:
    Sep 5, 2016
    Posts:
    30
    and in your sample.
    IframeExecuteJS is call from C#?
    if it is call from C#.
    you need use JSON.stringify(Pointer_stringify(script));
     
    kou-yeung, Jul 16, 2019
    #5

  6. nsmith1024

    nsmith1024

    Joined:
    Mar 18, 2014
    Posts:
    869
    Hello,

    Did you get this to work? Putting iFrame inside WebGL?

    Thanks
     
    nsmith1024, Aug 9, 2019
    #6