Javascript iframe与hammer.js手势冲突

我使用hammer.js[jQuery插件版本]来提供简单的触摸手势——在本例中，我只是使用swipleft和swiperight在页面之间导航。一切都很好，除了

在一些页面上，我有一个

来显示Youtube视频。当手势在

中开始时，加载下一页的javascript不会运行，因为上下文是

，而不是页面的其余部分。如果手势从页面上的任何其他位置开始[即使它以

]结尾]，则下一页将正确加载

我希望能够在窗口中的任何位置识别该手势，而不受iframe的影响

我已经在谷歌上做了大量的搜索，但我还没有找到一个有效的解决方案

以下是我的Hammer JS代码：

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

下面是标准的YouTube

代码：

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

我也是一个JS新手

如果您能提供任何帮助，我们将不胜感激

---

Ryan

我有一个类似的要求，我所做的是将我的刷卡事件附加到iFrame

上，如下所示：

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

//获取
var iframe=document.getElementById（'iframelement'）；
iframe.onload=函数（）{
//内容可用后，获取正文
var iframeBody=iframe.contentWindow.document.body；
//将手势注册为正常
液压锤（iframeBody）.on（“swipeleft”，功能（事件）{
//剂量
SwipeLeft（）；
});
}

onload确保文档已完成加载，并且所需的元素可用于绑定

---

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

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