我正在尝试将 HTML5 游戏嵌入到 iframe 中，以便在 iPad 和 iPhone 等移动设备的浏览器中显示。
如果您直接在 iPad 上访问它们，它们工作正常。
但如果您使用 iframe 嵌入它们，那么当您触摸游戏然后松开时，游戏会暂停。
有没有办法阻止这种 iframe 行为，以便它们按应有的方式运行？
当您停止触摸时似乎失去了焦点，它认为是您的空缺和停顿？
示例
在模拟器中尝试下面的两个示例链接，您会看到问题
iPhone/iPad 模拟器:https://app.io/safari
直接游戏链接(游戏作品):http://static.tresensa.com/madcab/index.html?dst=A0000
嵌入式游戏链接(游戏无法运行):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>
...都没有帮助
最佳答案
现在遇到同样的问题。似乎只有 Safari 以这种方式在 Google Chrome Samsung Galaxay S4 上运行。
更新: 我认为这个问题无法通过托管游戏的网站来解决。到目前为止，我在深入研究 Material 时发现了什么:如果将其添加到代码中 例如 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 游戏”中，它将起作用并阻止此行为(例如:touchmoves、touchscroll 等使游戏失去焦点的一切)。 但是 iframe 中的所有内容都遵守那里的代码规则，如果我们尝试将其添加到 iframe-grid 中，似乎无法阻止。
我能想到的唯一解决方法是用更高的 z-index 覆盖一个绝对不可见的 div，并尝试向其添加功能。但我认为在这种情况下，游戏将不再对触摸做出响应。 IDK...
关于ios - 嵌入 iframe 时的 HTML5 游戏触摸问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19801461/