Jump to content

Is there a way to add an Iframe onto HTML5 Canvas


ganduking
 Share

Recommended Posts

So I'm trying to add an Iframe onto my iOS game in HTML5 and Cordova.  Seems I can't use the two in unison.

 

When I add the Iframe to the game the canvas doesn't draw correctly.  It just shows the Iframe and no game canvas.  Of course when I remove the Canvas the game works fine.  

 

The game was made in GameMaker which I exported it to HTML5 to then convert it over to IOS.  I am a coder but still learning my way around HTML5 (Mainly done HTML5, VB, PHP, C++).  All games moving forward I'm going to code from scratch.  However I'm taking some older games I made in Gamemaker and converting them over.  Other than the Index file the other files are illegible and hard to edit or make additions in the code.

 

Seems like the Iframe is interfering with the ability to draw on the canvas.  

 

Here is the code :

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="pragma" content="no-cache"/>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name ="viewport" content="width=2000, height=2000, initial-scale=0.63, maximum-scale=0.63, user-scalable=0" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta charset="utf-8"/>
 
        <!-- Set the title bar of the page -->
        <title>Game/title>
 
        <!-- Set the background colour of the document -->
        <style>
            body {
              background: #222;
              color:#cccccc;
              margin: 0px;
              padding: 0px;
              border: 0px;
            }
            canvas {
                      image-rendering: optimizeSpeed;
                      -webkit-interpolation-mode: nearest-neighbor;
                      margin: 0px;
                      padding: 0px;
                      border: 0px;
            }
            :-webkit-full-screen #canvas {
                 width: 70%
                 height: 70%;
            }
            div.gm4html5_div_class
            {
              margin: 0px;
              padding: 0px;
              border: 0px;
            }
            /* START - Login Dialog Box */
            div.gm4html5_login
            {
                 padding: 20px;
                 position: absolute;
                 border: solid 2px #000000;
                 background-color: #404040;
                 color:#00ff00;
                 border-radius: 15px;
                 box-shadow: #101010 20px 20px 40px;
            }
            div.gm4html5_cancel_button
            {
                 float: right;
            }
            div.gm4html5_login_button
            {
                 float: left;
            }
            div.gm4html5_login_header
            {
                 text-align: center;
            }
            /* END - Login Dialog Box */
            :-webkit-full-screen {
               width: 70%;
               height: 70%;
            }
        </style>
    </head>
 
 
 
 
    <body>
 
 
<iframe src="http://www.url-removed.htm" name="c" frameborder="0" scrolling="no"  horizontalscrolling="no" verticalscrolling="no" style="height:110px;width:310px;position:absolute;top:0px;left:0px;">
 
 
 
        <div class="gm4html5_div_class" id="gm4html5">
 
 
            <!-- Create the canvas element the game draws to -->
            <canvas id="canvas" width="900" height="480" >
 
 
               <p>Your browser doesn't support HTML5 canvas.</p>
 
  
            </canvas>
        </div>
 
        <!-- Run the game code -->
        <script type="text/javascript" src="html5game/game.js?ESCBC=843720266"></script>
 
 
 
    </body>
</html>
Link to comment
Share on other sites

Thanks for your reply!

 

Sorry I've been playing back and forth with the code.  So that version had some chopping and cut and paste.  But yes the </frame> tag is there as the pasted version was an older version of the code.

 

So I discovered that the canvas does appropriately load in firefox.  Its just a delayed load that takes up 30+ seconds.  However when I convert it via Cordova it just sits there.  Chrome also it just sits there.

 

You can see the App with the Iframe at this link : http://bit.ly/1RbyKtJ   - Need to use firefox for it work.

 

I tried moving the Iframe after sequentially drawing the canvas.  To hopefully get the canvas to load and then have the iframe come later to perhaps fix the problem.  Any way I can change the load order of the items?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...