19

HTML5 ゲームを iframe に埋め込んで、iPad や iPhone などのモバイル デバイスのブラウザに表示しようとしています。

iPad で直接アクセスすると、問題なく動作します。

ただし、iframe を使用してそれらを埋め込むと、ゲームに触れて離すと、ゲームが一時停止します。

この iframe の動作を停止して、本来の動作をさせる方法はありますか?

触るのをやめて、空っぽだと思って一時停止すると、集中力が失われているようですか?

以下の 2 つのサンプル リンクをエミュレータで試すと、問題が発生します。

私が使用しているコード(基本)

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

...どちらも役に立たなかった

4

2 に答える 2

6

現時点で同じ問題に直面しています。Google Chrome Samsung Galaxay S4 でこのように動作するのは Safari だけのようです。

更新: この問題は、ゲームをホストしている Web サイトからは解決できないと思います。資料を深く掘り下げてこれまでにわかったこと: これを 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);

「iframe ゲーム」の場合、この動作 (タッチムーブ、タッチスクロールなど、ゲームのフォーカスを失うものすべて) が機能し、ブロックされます。しかし、iframe にあるものはすべてそこのコードのルールに固執しており、これを iframe-grid に追加しようとするとブロックできないようです。

私が考えることができる唯一の回避策は、絶対に見えない div をより高い z-index でオーバーレイし、それに機能を追加しようとすることです。しかし、この場合、ゲームはもうタッチしても反応しないと思います。IDK...

于 2013-11-18T23:39:42.407 に答える
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];
}

 

これは、2 つのフレーム間の通信手段を設定するだけです。次のセクションでこれを使用して、最上位フレームと宛先フレームの間でイベントを適切に渡します。

次に、それらのイベントを、子コンテナー内の適切な場所にある適切な要素に強制的にプッシュします。

 

親ドキュメント (のコンテナ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);
  }
}

仮定


  1. あなたiframeはそれを含む要素と同じサイズです
  2. あなたのコードはモバイルでのみ使用されます
    • Web 用に(iframe で)使用していて、何らかの方法で IE 8 以下で動作させる場合は、それに応じて使用attachEventおよびシムする必要がありますelementFromPoint

その他の考慮事項


jQueryを使用している場合

  • pageX/pageY を使用した jQuery のタッチ イベント
  • この答えはおそらく不完全です。正しい要素をヒットしていることを確認するには、さらに多くのことを行う必要があります。
    • たとえば、何らかの種類のオーバーレイを使用している場合、オーバーレイに CSS をpointer-events: none;使用する必要があります。
于 2014-12-10T23:22:59.290 に答える