ganduking Posted November 26, 2015 Share Posted November 26, 2015 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> Quote Link to comment Share on other sites More sharing options...
b10b Posted November 27, 2015 Share Posted November 27, 2015 I don't see a </iframe> tag in your code ... maybe that is causing the issue? Quote Link to comment Share on other sites More sharing options...
ganduking Posted November 27, 2015 Author Share Posted November 27, 2015 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? Quote Link to comment Share on other sites More sharing options...
b10b Posted November 27, 2015 Share Posted November 27, 2015 Perhaps this relates to how iframes behave a little differently on iOS (~expand to fit their content)? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.