Menu
I'm trying to embed HTML5 games in iframes to display in browser on mobile devices such as iPads and iPhones.
If you visit them directly on an iPad they work fine.
But if you embed them using an iframe then when you touch the game and then let go, the game pauses.
Is there a way to stop this iframe behaviour so that they behave as they should?
It seems like maybe focus is lost when you stop touching and it think's your vacant and pauses?
Example
Try the two example links below in the emulator and you will see the issue
iPhone / iPad emulator: https://app.io/safari
Direct Game Link (game works): http://static.tresensa.com/madcab/index.html?dst=A0000
Embedded Game Link (game doesn't work): http://drttrd.com/testIframe.php
The code I'm using (basic)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Game</title>
</head>
<body>
<div>
<iframe src="http://static.tresensa.com/madcab/index.html?dst=A0000" frameborder="0" scrolling="no" width="960" height="536"></iframe>
</div>
</body>
</html>
What I've tried
css styling to change the interaction type
<div style="overflow:auto;-webkit-overflow-scrolling:touch;">
<iframe src="" height="" height=""></iframe>
</div>
JS to prevent defaults
<script>
document.ontouchmove = function(e) {
e.preventDefault();
};
</script>
... neither have helped
451
HTML 5 <iframe> Tag. The HTML <iframe> tag is used to specify an inline frame, or, as the HTML5 specification refers to it, a nested browsing context. An inline frame allows you to embed another document within the current HTML document.
Deprecated AttributesSome attributes from HTML4 are no longer allowed in HTML5 at all and they have been removed completely. img and iframe.
If you create an iframe, your site becomes vulnerable to cross-site attacks. You may get a submittable malicious web form, phishing your users' personal data. A malicious user can run a plug-in. A malicious user can change the source site URL.
Facing the same problem at the moment. It seems only Safari does it in that way on Google Chrome Samsung Galaxay S4 it works.
Update: I think this problem can't be solved from a website hosting the game. What I found out so far while going deeper into the material: If you add this into the code for example CSS:
body{
-ms-touch-action: none;
touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
or/and Javascript
document.addEventListener('ontouchstart', function(e) {e.preventDefault()}, false);
document.addEventListener('ontouchmove', function(e) {e.preventDefault()}, false);
of the "iframed game" it will work and block this behavior (things like: touchmoves, touchscroll etc. everthing that makes the game losing focus). But everything which is in the iframe sticks to the rules of the code there and seems can't be blocked if we try to add this to the iframe-grid.
The only workaround I could think of is to overlay an absolute invisible div with an higher z-index and try to add the abilities to it. But I think the game won't respond at the touch anymore in this case. IDK...
67
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
