iframe 与hammer.js 手势冲突答案

【问题标题】：iframe conflicting with hammer.js gesturesiframe 与hammer.js 手势冲突
【发布时间】：2013-06-25 21:30:07
【问题描述】：

我正在使用hammer.js [jQuery 插件版本] 来提供简单的触摸手势——在这种情况下，我只是使用向左滑动和向右滑动——在页面之间导航。一切正常，除了...

在某些页面上，我有一个 <iframe> 来显示 Youtube 视频。当手势在<iframe> 内开始时，加载下一页的javascript 不会运行，因为上下文是<iframe>，而不是页面的其余部分。如果手势开始于页面上的任何其他位置 [即使它以 <iframe> 结束]，则下一页将正确加载。

我想要的是让手势在窗口中的任何位置都能被识别，并且不受 iframe 的影响。

我已经进行了大量的谷歌搜索，但我还没有想出一个可行的解决方案。

这是我的 Hammer JS 代码：

var hammertime = Hammer('html').on("swipeleft", function(event) {
  document.location = "http://www.example.com/";
});

还有，这是标准的 YouTube <iframe> 代码：

<iframe width="100%" src="http://www.youtube.com/embed/Gh5XWWXHVQk?rel=0" frameborder="0" allowfullscreen></iframe>

我也是一个 JS 新手。

您能提供的任何帮助将不胜感激。

瑞恩

【问题讨论】：

感觉有点像作弊，但你可以在播放器上放置一个不可见的元素，但这会阻止 youtube 按钮的工作。我认为问题在于hammer 没有从iframe 内部运行，浏览器将它视为两个单独的页面。我绝不是浏览器如何与 iframe 一起工作的专家，而且我从未使用过hammer（尽管现在将对其进行检查），但我怀疑现在是否有适合您的完美解决方案。 :(
@JamieTaylor – 我确实遇到了一个类似的问题，建议这样做，但它是为了在 iframe 上拖动一个对象，并且他们只在拖动期间创建了该对象。我认为这就是答案，直到我意识到他们可以这样做，因为他们的行动是在 iframe 之外开始的。而且，正如您所说，该元素会阻止 youtube 按钮工作，这也不理想。目前，我正在考虑改变包含 YouTube 视频的方式，可能使用 MediaElements.js，但同样，不一定理想......
刚刚试用了MediaElement.js，并没有解决这个问题，因为MediaElement.js插入了一个iframe...

标签： javascript iframe touch hammer.js

【解决方案1】：

我有类似的要求，我所做的是将滑动事件附加到 iframe <body>，如下所示：

// Get <iFrame>
var iframe = document.getElementById('iframeElement');

iframe.onload = function () {
    // Once content is available, get body
    var iframeBody = iframe.contentWindow.document.body;

    // Register gestures as normal
    Hammer(iframeBody).on("swipeleft", function (event) {
        // Dosomething
        SwipeLeft();
    });
}

onload 确保文档已完成加载并且您想要的元素可用于绑定。

现在在 iframe 中的任意位置向左滑动都会触发 SwipeLeft()，您可以将其与主文档上的绑定结合起来以实现“全屏”滑动。

【讨论】：