Dan*_*Dan 19 css embed iframe html5 ios
我正试图在iframe中嵌入HTML5游戏,以便在iPad和iPhone等移动设备上的浏览器中显示.
如果您直接在iPad上访问它们,它们可以正常工作.
但是如果你使用iframe嵌入它们,那么当你触摸游戏然后放手时,游戏就会暂停.
有没有办法阻止这种iframe行为,以便他们按照自己的意愿行事？
当你停止触摸并且它认为你的空置和停顿时,似乎可能会失去焦点？
例
在模拟器中尝试下面的两个示例链接,您将看到问题
iPhone/iPad模拟器:https://app.io/safari
直接游戏链接(游戏作品):http://static.tresensa.com/madcab/index.html？dr = 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在谷歌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游戏"它将起作用并阻止这种行为(例如:touchmoves,touchscroll等等,使游戏失去焦点).但是iframe中的所有内容都遵循代码规则,如果我们尝试将其添加到iframe网格中,似乎无法阻止.
我能想到的唯一解决方法是使用更高的z-index覆盖绝对不可见的div并尝试向其添加功能.但我认为在这种情况下游戏不会再触摸.IDK ...
| 归档时间： |
|
| 查看次数： |
2579 次 |
| 最近记录： |