嵌入到iframe中时HTML5游戏触摸问题
我正在尝试在iframes中嵌入HTML5游戏，以便在iPads和iPhones等移动设备上的浏览器中显示。
如果你直接在iPad上访问它们，它们工作得很好。
但是如果你使用iframe嵌入它们，那么当你触摸游戏然后松开时，游戏会暂停。
有没有一种方法可以阻止这种iframe行为，使它们按照应该的方式运行？
似乎当你停止触摸时，注意力就会丢失，它会认为这是你的空虚和停顿？
示例
在仿真器中尝试下面的两个示例链接，您将看到该问题
- Direct
- iPhone/ iPad模拟器：https://app.io/safari
- Direct游戏链接(游戏工作)：http://static.tresensa.com/madcab/index.html?dst=A0000
- Embedded游戏链接(游戏不工作)：http://drttrd.com/testIframe.php
对我使用的(基本)代码执行
<!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>..。两个都没有帮助。
回答 2
Stack Overflow用户
发布于 2013-11-19 07:39:42
正面临着同样的问题。似乎只有Safari在谷歌、Chrome、三星、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游戏“中，它将工作并阻止这种行为(比如:触摸移动、触摸滚动等所有让游戏失去焦点的东西)。但是iframe中的所有内容都遵循代码的规则，如果我们试图将其添加到iframe-grid中，似乎无法阻止。
我能想到的唯一解决办法就是用更高的z索引覆盖一个绝对不可见的div，并尝试向其添加功能。但我认为在这种情况下，游戏不会再在触摸时做出反应。艾克。
Stack Overflow用户
发布于 2014-12-11 07:22:59
该怎么做：
您可以在游戏页面的HTML中添加以下内容：
<body onload="init()">，或者在JavaScript中
document.addEventListener('load', init);在游戏页面上也添加如下JS
window.init = function() {
window.parent.frameRegister(window.frameElement.id);
}在容器页面中，在JS中定义frameRegister：
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与其包含的元素大小相同- 如果大小不同，请包括类似的内容：Finding element's position relative to the document，然后使用
elementFromPoint(e.pageX - offsetLeft(), e.pageY - offsetTop())元素
- 如果大小不同，请包括类似的内容：Finding element's position relative to the document，然后使用
- 您的代码仅用于移动
- 如果您将其用于web (在iframe中)并以某种方式使其在IE 8或更低版本中工作，则需要使用
attachEvent和shimelementFromPointiframe
- 如果您将其用于web (在iframe中)并以某种方式使其在IE 8或更低版本中工作，则需要使用
其他注意事项
如果使用的是jQuery，则为
- Touch events in jQuery using pageX/pageY
- This答案可能不完整。为了确保命中正确的元素，还需要做更多的事情。CSS
- 例如，如果您正在使用任何类型的覆盖，覆盖上带有
pointer-events: none;的CSS将需要为used.
https://stackoverflow.com/questions/19801461
复制相似问题