ios - hechos - Problemas táctiles del juego HTML5 cuando están incrustados en un iframe
juegos en javascript (2)
Estoy tratando de integrar juegos HTML5 en iframes para mostrar en el navegador en dispositivos móviles como iPads y iPhones.
Si los visitas directamente en un iPad funcionan bien.
Pero si los incorporas usando un iframe, cuando tocas el juego y luego lo dejas ir, el juego se detiene.
¿Hay alguna manera de detener este comportamiento de iframe para que se comporten como deberían?
Parece que tal vez el enfoque se pierde cuando dejas de tocar y piensas que está vacío y se detiene.
Ejemplo
Pruebe los dos enlaces de ejemplo a continuación en el emulador y verá el problema.
Emulador de iPhone / iPad: https://app.io/safari
Enlace directo del juego (el juego funciona): http://static.tresensa.com/madcab/index.html?dst=A0000
Enlace de juego incorporado (el juego no funciona): http://drttrd.com/testIframe.php
El código que estoy usando (básico)
<!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>
Lo que he intentado
Estilo CSS para cambiar el tipo de interacción.
<div style="overflow:auto;-webkit-overflow-scrolling:touch;">
<iframe src="" height="" height=""></iframe>
</div>
JS para prevenir incumplimientos
<script>
document.ontouchmove = function(e) {
e.preventDefault();
};
</script>
... tampoco han ayudado
Qué hacer:
Puedes agregar lo siguiente al HTML de la página del juego:
<body onload="init()">
o alternativamente en JavaScript
document.addEventListener(''load'', init);
Agrega el siguiente JS en la página del juego también
window.init = function() {
window.parent.frameRegister(window.frameElement.id);
}
En su página de contenedor, defina frameRegister en JS:
var frame;
window.frameRegister = function(frameId) {
frame = window.frames[frameId];
}
Todo lo que está haciendo es establecer un medio de comunicación entre los dos marcos. Usaremos esto más adelante en la siguiente sección para pasar los eventos de manera apropiada entre los marcos de destino y de nivel superior.
Luego, vamos a forzar que esos eventos lleguen al elemento apropiado en la ubicación del contenedor de su hijo.
En el documento padre (su contenedor para el iframe )
Añadir este JS
var touchEvents = [''start'', ''move'', ''enter'', ''leave'', ''cancel'', ''leave'']; // Make this whichever events you want to pass
for (i = 0, l = touchEvents.length; i<l; i++) {
document.addEventLister(''touch'' + touchEvents[i], function(e) {
e.preventDefault();
frame.document.elementFromPoint(e.pageX, e.pageY);.dispatchEvent(e);
}
}
Suposiciones
- Tu
iframees del mismo tamaño que su elemento que contiene- Si no es así, incluya algo a este efecto: busque la posición del elemento en relación con el documento y luego use
elementFromPoint(e.pageX - offsetLeft(), e.pageY - offsetTop())apropiada.
- Si no es así, incluya algo a este efecto: busque la posición del elemento en relación con el documento y luego use
- Tu código se usa solo para móviles
- Si lo está utilizando para la web (en un iframe) y de alguna manera lo hace funcionar en IE 8 o menos, deberá usar
attachEventy shimelementFromPointconsecuencia.
- Si lo está utilizando para la web (en un iframe) y de alguna manera lo hace funcionar en IE 8 o menos, deberá usar
consideraciones adicionales
Si estas usando jQuery
- Toque eventos en jQuery usando pageX / pageY
- Esta respuesta es probablemente incompleta. Deberá hacer más cosas para garantizar que esté golpeando el elemento correcto.
- por ejemplo, si está utilizando algún tipo de superposición, CSS con
pointer-events: none;en la superposición tendrá que ser utilizado.
- por ejemplo, si está utilizando algún tipo de superposición, CSS con
Enfrentando el mismo problema en este momento. Parece que solo Safari lo hace de esta manera en Google Chrome Samsung Galaxay S4 funciona.
Actualización: creo que este problema no se puede resolver desde un sitio web que aloja el juego. Lo que descubrí hasta ahora al profundizar en el material: si agrega esto en el código, por ejemplo, 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;
}
o / y Javascript
document.addEventListener(''ontouchstart'', function(e) {e.preventDefault()}, false);
document.addEventListener(''ontouchmove'', function(e) {e.preventDefault()}, false);
del "juego iframed" funcionará y bloqueará este comportamiento (cosas como: touchmoves, touchscroll, etc., todo lo que hace que el juego pierda el foco). Pero todo lo que está en el iframe se adhiere a las reglas del código allí y parece que no se puede bloquear si intentamos agregar esto a la cuadrícula de iframe.
La única solución que se me ocurre es superponer un div invisible absoluto con un índice z más alto y tratar de agregarle habilidades. Pero creo que el juego ya no responderá al toque en este caso. IDK ...