Проблемы с сенсорным экраном HTML5 при встраивании в iframe

Я пытаюсь встроить игры HTML5 в iframe для отображения в браузере на мобильных устройствах, таких как iPads и iPhones.

Если вы посещаете их непосредственно на iPad, они работают нормально.

Но если вы вставляете их, используя iframe, тогда, когда вы касаетесь игры, а затем отпускаете, игра приостанавливается.

Есть ли способ остановить это поведение iframe, чтобы они вели себя так, как должны?

Кажется, может быть, фокус теряется, когда вы перестаете трогать, и он думает, что вы свободны и паузы?

Пример

Попробуйте два примера ссылок ниже в эмуляторе, и вы увидите проблему

Код, который я использую (базовый)

<!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>

Что я пробовал

css стиль для изменения типа взаимодействия

<div style="overflow:auto;-webkit-overflow-scrolling:touch;">
    <iframe src="" height="" height=""></iframe>
</div>

JS для предотвращения по умолчанию

<script>
document.ontouchmove = function(e) {
    e.preventDefault();
};
</script>

... ни помогли

Ответы

Ответ 1

В то же время сталкивается с той же проблемой. Кажется, только Safari делает это таким образом в Google Chrome Samsung Galaxay S4, он работает.

Обновление: Я думаю, что эта проблема не может быть решена с сайта, на котором размещена игра. То, что я обнаружил до сих пор, углубляясь в материал: если вы добавите это в код например 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;
    }

или/и Javascript

document.addEventListener('ontouchstart', function(e) {e.preventDefault()}, false);
document.addEventListener('ontouchmove', function(e) {e.preventDefault()}, false);

из "iframed game" он будет работать и блокировать это поведение (такие вещи, как: touchmoves, touchscroll и т.д. все, что заставляет игру терять фокус). Но все, что есть в iframe, придерживается правил кода там и кажется, не может быть заблокировано, если мы попытаемся добавить это в iframe-сетку.

Единственным обходным решением, о котором я мог думать, является наложение абсолютного невидимого div с более высоким z-индексом и попытка добавить к нему способности. Но я думаю, что в этом случае игра больше не будет реагировать на прикосновение. ИДК...

Ответ 2

Что делать:

На страницу игры вы можете добавить HTML:

<body onload="init()">

или, альтернативно, в JavaScript

document.addEventListener('load', init);

 

Добавьте также следующую JS на страницу игры

window.init = function() {
  window.parent.frameRegister(window.frameElement.id);
}

 

На странице вашего контейнера определите frameRegister в JS:

var frame;
window.frameRegister = function(frameId) {
  frame = window.frames[frameId];
}

 

Все это делает настройку средства связи между двумя кадрами. Мы будем использовать это позже в следующем разделе, чтобы передавать события соответствующим образом между кадрами верхнего уровня и назначения.

Затем мы будем принудительно нажимать эти события на соответствующий элемент в местоположении вашего дочернего контейнера.

 

В родительском документе (ваш контейнер для iframe)

Добавьте этот 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);
  }
}

Предположения

  • Ваш iframe имеет тот же размер, что и его содержащий элемент
  • Ваш код используется только для мобильных устройств
    • Если вы используете его для Интернета (в iframe) и как-то заставляете его работать в IE 8 или меньше, вам нужно будет использовать attachEvent и shim elementFromPoint соответственно.

Дополнительные соображения

Если вы используете jQuery

  • Коснитесь событий в jQuery, используя pageX/pageY
  • Этот ответ, скорее всего, не завершен. Необходимо сделать больше вещей, чтобы убедиться, что вы нажимаете правильный элемент.
    • например. Если вы используете какой-либо наложение, необходимо использовать CSS с pointer-events: none; на наложении.