19

我正在尝试在 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>

...都没有帮助

4

2 回答 2

6

目前面临同样的问题。似乎只有 Safari 才能在 Google 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-index 覆盖绝对不可见的 div 并尝试为其添加功能。但我认为在这种情况下游戏将不再响应触摸。身份证...

于 2013-11-18T23:39:42.407 回答
2

该怎么办：

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

<body onload="init()">

或者在 JavaScript 中

document.addEventListener('load', init);

 

在游戏页面添加如下JS

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

 

在您的容器页面中，frameRegister在 JS 中定义：

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);
  }
}

假设

  1. 您iframe的大小与其包含元素相同
  2. 您的代码仅用于移动设备
    • 如果您将它用于网络（在 iframe 中）并以某种方式使其在 IE 8 或更低版本中运行，则需要相应地使用attachEvent和填充elementFromPoint。

其他注意事项

如果你使用 jQuery

  • jQuery中使用pageX/pageY的触摸事件
  • 这个答案可能不完整。为了确保您击中正确的元素，需要做更多的事情。
    • 例如，如果您使用任何类型的叠加层，pointer-events: none;则需要使用带有叠加层的 CSS。
于 2014-12-10T23:22:59.290 回答