blocks|key|173047|text|正面临着同样的问题。似乎只有Safari在谷歌、Chrome、三星、Galaxay、S4上都是这样做的，它是有效的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|173048|更新:我认为这个问题不能通过一个托管游戏的网站来解决。到目前为止，我在深入了解材料时发现:如果您将此代码添加到代码中，例如CSS：|173049|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;
++++}|code-block|syntax|javascript|173050|或/和Javascript|173051|document.addEventListener('ontouchstart',+function(e)+{e.preventDefault()},+false);
document.addEventListener('ontouchmove',+function(e)+{e.preventDefault()},+false);|173052|在"iframed游戏“中，它将工作并阻止这种行为(比如:触摸移动、触摸滚动等所有让游戏失去焦点的东西)。但是iframe中的所有内容都遵循代码的规则，如果我们试图将其添加到iframe-grid中，似乎无法阻止。|173053|我能想到的唯一解决办法就是用更高的z索引覆盖一个绝对不可见的div，并尝试向其添加功能。但我认为在这种情况下，游戏不会再在触摸时做出反应。艾克。|173054|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

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:

<pre><code>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;
 }
</code></pre>

or/and Javascript

<pre><code>document.addEventListener('ontouchstart', function(e) {e.preventDefault()}, false);
document.addEventListener('ontouchmove', function(e) {e.preventDefault()}, false);
</code></pre>

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

blocks|key|170520|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|170521|该怎么做：|170522|170523|您可以在游戏页面的HTML中添加以下内容：|170524|<body+onload="init()">|code-block|syntax|javascript|170525|，或者在JavaScript中|offset|length|style|BOLD|170526|document.addEventListener('load',+init);|170527|在游戏页面上也添加如下JS|170528|window.init+=+function()+{
++window.parent.frameRegister(window.frameElement.id);
}|170529|在容器页面中，在JS中定义frameRegister：|CODE|170530|var+frame;
window.frameRegister+=+function(frameId)+{
++frame+=+window.frames[frameId];
}|170531|所有这些操作都是在两个帧之间建立一种通信方式。我们将在下一节后面使用它在顶层帧和目标帧之间适当地传递事件。|170532|然后，我们将强制将这些事件推送到子容器中相应位置的元素。|170533|父文档(+iframe**)**的容器)上的|170534|添加此JS|170535|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%2B%2B)+{
++document.addEventLister('touch'+%2B+touchEvents[i],+function(e)+{
++++e.preventDefault();
++++frame.document.elementFromPoint(e.pageX,+e.pageY);.dispatchEvent(e);
++}
}|170536|170537|假设|170538|170539|170540|您的iframe与其包含的元素大小相同|ordered-list-item|170541|如果大小不同，请包括类似的内容：Finding+element's+position+relative+to+the+document，然后使用elementFromPoint(e.pageX+-+offsetLeft(),+e.pageY+-+offsetTop())元素|unordered-list-item|170542|170543|170544|​|170545|170546|您的代码仅用于移动|170547|如果您将其用于web+(在iframe中)并以某种方式使其在IE+8或更低版本中工作，则需要使用attachEvent和shim+elementFromPoint+iframe|170548|170549|170550|170551|170552|其他注意事项|170553|170554|如果使用的是jQuery，则为|170555|170556|Touch+events+in+jQuery+using+pageX/pageY|170557|This答案可能不完整。为了确保命中正确的元素，还需要做更多的事情。CSS+|170558|例如，如果您正在使用任何类型的覆盖，覆盖上带有pointer-events:+none;的CSS将需要为used.|170559|170560|170561|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document|1|https://stackoverflow.com/questions/4780837/is-there-an-equivalent-to-e-pagex-position-for-touchstart-event-as-there-is-fo^0|0|0|0|0|0|0|E|0|0|0|0|D|D|0|0|0|0|5|8|5|6|0|0|5|0|0|0|0|2|0|0|0|0|J|2|6|1|0|3T|20|1R|G|1F|0|1|0|0|0|1|0|0|0|9|1|0|2G|1C|B|1T|G|1|0|0|0|1|0|0|0|6|0|0|0|C|0|0|0|14|0|14|1|0|0|12|0|0|1L|N|L|0|0|0|1|0^^$0|@$1|2|3|-4|4|5|6|2N|7|@]|8|@]|9|$]]|$1|A|3|B|4|5|6|2O|7|@]|8|@]|9|$]]|$1|C|3|-4|4|5|6|2P|7|@]|8|@]|9|$]]|$1|D|3|E|4|5|6|2Q|7|@]|8|@]|9|$]]|$1|F|3|G|4|H|6|2R|7|@]|8|@]|9|$I|J]]|$1|K|3|L|4|5|6|2S|7|@$M|2T|N|2U|O|P]]|8|@]|9|$]]|$1|Q|3|R|4|H|6|2V|7|@]|8|@]|9|$I|J]]|$1|S|3|T|4|5|6|2W|7|@]|8|@]|9|$]]|$1|U|3|V|4|H|6|2X|7|@]|8|@]|9|$I|J]]|$1|W|3|X|4|5|6|2Y|7|@$M|2Z|N|30|O|Y]]|8|@]|9|$]]|$1|Z|3|10|4|H|6|31|7|@]|8|@]|9|$I|J]]|$1|11|3|12|4|5|6|32|7|@]|8|@]|9|$]]|$1|13|3|14|4|5|6|33|7|@]|8|@]|9|$]]|$1|15|3|16|4|5|6|34|7|@$M|35|N|36|O|P]|$M|37|N|38|O|Y]]|8|@]|9|$]]|$1|17|3|18|4|5|6|39|7|@$M|3A|N|3B|O|P]]|8|@]|9|$]]|$1|19|3|1A|4|H|6|3C|7|@]|8|@]|9|$I|J]]|$1|1B|3|-4|4|5|6|3D|7|@]|8|@]|9|$]]|$1|1C|3|1D|4|5|6|3E|7|@$M|3F|N|3G|O|P]]|8|@]|9|$]]|$1|1E|3|-4|4|5|6|3H|7|@]|8|@]|9|$]]|$1|1F|3|-4|4|5|6|3I|7|@]|8|@]|9|$]]|$1|1G|3|1H|4|1I|6|3J|7|@$M|3K|N|3L|O|P]|$M|3M|N|3N|O|Y]]|8|@]|9|$]]|$1|1J|3|1K|4|1L|6|3O|7|@$M|3P|N|3Q|O|P]|$M|3R|N|3S|O|Y]]|8|@$M|3T|N|3U|1|3V]]|9|$]]|$1|1M|3|-4|4|5|6|3W|7|@]|8|@]|9|$]]|$1|1N|3|-4|4|5|6|3X|7|@]|8|@]|9|$]]|$1|1O|3|1P|4|5|6|3Y|7|@$M|3Z|N|40|O|P]]|8|@]|9|$]]|$1|1Q|3|-4|4|5|6|41|7|@]|8|@]|9|$]]|$1|1R|3|1S|4|1I|6|42|7|@$M|43|N|44|O|P]]|8|@]|9|$]]|$1|1T|3|1U|4|1L|6|45|7|@$M|46|N|47|O|P]|$M|48|N|49|O|Y]|$M|4A|N|4B|O|Y]]|8|@]|9|$]]|$1|1V|3|-4|4|5|6|4C|7|@]|8|@]|9|$]]|$1|1W|3|-4|4|5|6|4D|7|@]|8|@]|9|$]]|$1|1X|3|1P|4|5|6|4E|7|@$M|4F|N|4G|O|P]]|8|@]|9|$]]|$1|1Y|3|-4|4|5|6|4H|7|@]|8|@]|9|$]]|$1|1Z|3|20|4|5|6|4I|7|@$M|4J|N|4K|O|P]]|8|@]|9|$]]|$1|21|3|-4|4|5|6|4L|7|@]|8|@]|9|$]]|$1|22|3|23|4|5|6|4M|7|@$M|4N|N|4O|O|P]]|8|@]|9|$]]|$1|24|3|-4|4|5|6|4P|7|@]|8|@]|9|$]]|$1|25|3|26|4|1L|6|4Q|7|@$M|4R|N|4S|O|P]]|8|@$M|4T|N|4U|1|4V]]|9|$]]|$1|27|3|28|4|1L|6|4W|7|@$M|4X|N|4Y|O|P]]|8|@]|9|$]]|$1|29|3|2A|4|1L|6|4Z|7|@$M|50|N|51|O|P]|$M|52|N|53|O|Y]]|8|@]|9|$]]|$1|2B|3|-4|4|5|6|54|7|@]|8|@]|9|$]]|$1|2C|3|1P|4|5|6|55|7|@$M|56|N|57|O|P]]|8|@]|9|$]]|$1|2D|3|-4|4|5|6|58|7|@]|8|@]|9|$]]]|2E|$2F|$4|2G|2H|2I|9|$2J|2K]]|2L|$4|2G|2H|2I|9|$2J|2M]]]]

<hr>

<h1>What to do:</h1>

<hr>

You can add the following to the game page's HTML:

<pre><code>&lt;body onload="init()"&gt;
</code></pre>

or alternatively in JavaScript

<pre><code>document.addEventListener('load', init);
</code></pre>

&nbsp; 

Add the following JS on the game page as well

<pre><code>window.init = function() {
 window.parent.frameRegister(window.frameElement.id);
}
</code></pre>

&nbsp;

In your container page, define <code>frameRegister</code> in JS:

<pre><code>var frame;
window.frameRegister = function(frameId) {
 frame = window.frames[frameId];
}
</code></pre>

&nbsp;

All this is doing is setting up a means of communication between the two frames. We'll be using this later in the next section to pass events appropriately between the top-level and destination frames.

Then we're going to force push those events to the appropriate element at the location in your child container.

&nbsp;

On the parent document (your container for the <code>iframe</code>)

Add this JS

<pre><code>var touchEvents = ['start', 'move', 'enter', 'leave', 'cancel', 'leave']; // Make this whichever events you want to pass

for (i = 0, l = touchEvents.length; i&lt;l; i++) {
 document.addEventLister('touch' + touchEvents[i], function(e) {
 e.preventDefault();
 frame.document.elementFromPoint(e.pageX, e.pageY);.dispatchEvent(e);
 }
}
</code></pre>

<hr>

<h1>Assumptions</h1>

<hr>

<ol>
<li>Your <code>iframe</code> is the same size as its containing element

<ul>
<li>If it's not, please include something to this effect: <a href="https://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document">Finding element's position relative to the document</a> and then use <code>elementFromPoint(e.pageX - offsetLeft(), e.pageY - offsetTop())</code> appropriately.</li>
</ul></li>
<li>Your code is used only for mobile

<ul>
<li>If you're using it for the web (in an iframe) and somehow getting it to work in IE 8 or less, you'll need to use <code>attachEvent</code> and shim <code>elementFromPoint</code> accordingly.</li>
</ul></li>
</ol>

<hr>

<h1>Additional Considerations</h1>

<hr>

If you're using jQuery

<ul>
<li><a href="https://stackoverflow.com/questions/4780837/is-there-an-equivalent-to-e-pagex-position-for-touchstart-event-as-there-is-fo">Touch events in jQuery using pageX/pageY</a></li>
<li>This answer is likely incomplete. More things will need to be done in order to ensure you're hitting the correct element. 

<ul>
<li>e.g. If you're using any sort of overlay, CSS with <code>pointer-events: none;</code> on the overlay will need to be used.</li>
</ul></li>
</ul>

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

<ul>
<li>iPhone / iPad emulator: <a href="https://app.io/safari">https://app.io/safari</a></li>
<li>Direct Game Link (game works): <a href="http://static.tresensa.com/madcab/index.html?dst=A0000">http://static.tresensa.com/madcab/index.html?dst=A0000</a></li>
<li>Embedded Game Link (game doesn't work): <a href="http://drttrd.com/testIframe.php">http://drttrd.com/testIframe.php</a></li>
</ul>

The code I'm using (basic)

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;Game&lt;/title&gt;
&lt;/head&gt; 
&lt;body&gt;

&lt;div&gt;
 &lt;iframe src="http://static.tresensa.com/madcab/index.html?dst=A0000" frameborder="0" scrolling="no" width="960" height="536"&gt;&lt;/iframe&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

What I've tried

css styling to change the interaction type

<pre><code>&lt;div style="overflow:auto;-webkit-overflow-scrolling:touch;"&gt;
 &lt;iframe src="" height="" height=""&gt;&lt;/iframe&gt;
&lt;/div&gt;
</code></pre>

JS to prevent defaults

<pre><code>&lt;script&gt;
document.ontouchmove = function(e) {
 e.preventDefault();
};
&lt;/script&gt;
</code></pre>

... neither have helped

HTML5 game touch issues when embedded in an iframe

容器

jQuery

HTML5

我正在尝试在iframes中嵌入HTML5游戏，以便在iPads和iPhones等移动设备上的浏览器中显示。如果你直接在iPad上访问它们，它们工作得很好。但是如果你使用iframe嵌入它们，那么当你触摸游戏然后松开时，游戏会暂停。有没有一种方法可以阻止这种iframe行为，使它们按照应该的方式运行？似乎当你停止触摸时...

问嵌入到iframe中时HTML5游戏触摸问题
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问嵌入到iframe中时HTML5游戏触摸问题EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问嵌入到iframe中时HTML5游戏触摸问题
EN