如何解决嵌入在iframe中时HTML5游戏触摸问题?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (192)

试图在iframe中嵌入HTML5游戏,以便在移动设备(如iPad和iPhone)上的浏览器中显示。

如果直接在iPad上访问他们,效果很好。

但是,如果使用iframe嵌入它们,那么当触摸游戏然后放手时,游戏会暂停。

有没有办法阻止这种iframe的行为,以便他们的行为是想要的?

当停止触摸,它似乎可能会失去焦点,它认为处于空缺和暂停的状态?

我正在使用的代码(基本)

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

这些都没有用。

提问于
用户回答回答于

该怎么办:

可以将以下内容添加到游戏页面的HTML中:

<body onload="init()">

或者用JavaScript代替

document.addEventListener('load', init);

在游戏页面上添加以下JS

window.init = function() {
  window.parent.frameRegister(window.frameElement.id);
}

在container页面中,frameRegister在JS中定义:

var frame;
window.frameRegister = function(frameId) {
  frame = window.frames[frameId];
}

所有这一切都是在两个框架之间建立一种沟通方式。我们稍后将使用它,以便在顶级和目标帧之间正确传递事件。

然后,我们将强制将这些事件推送到您的子容器中位置的相应元素。

在父文档(你的 container 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的尺寸与其包含的元素相同
    • 如果不是,请包含以下内容:查找元素相对于文档的位置,然后elementFromPoint(e.pageX - offsetLeft(), e.pageY - offsetTop())适当地使用。

  2. 代码仅用于移动设备
    • 如果在web上使用它(在iframe中)并以某种方式使它在IE 8或更低版本中工作,则需要相应地使用attachEvent和填充elementFromPoint

用户回答回答于

目前面临同样的问题。似乎只有Safari在谷歌浏览器Samsung 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网格中,似乎无法阻止。

我能想到的唯一解决方法是覆盖绝对不可见的div,并使用更高的z-index,并尝试向其添加功能。但我认为在这种情况下,游戏不会在触摸时做出响应。

所属标签

可能回答问题的人

  • 嗨喽你好

    7 粉丝480 提问8 回答
  • uncle_light

    5 粉丝518 提问6 回答
  • 人生的旅途

    10 粉丝484 提问6 回答
  • 富有想象力的人

    3 粉丝0 提问6 回答

扫码关注云+社区

领取腾讯云代金券