我使用 hammer.js [jQuery 插件版本] 来提供简单的触摸手势——在本例中，我只使用 swipeleft 和 swiperight——在页面之间导航。一切正常，除了...
在某些页面上我有一个 <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 新手。
如果您能提供任何帮助，我们将不胜感激。
瑞安
最佳答案
我有类似的要求，我所做的是将滑动事件附加到 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 确保文档已完成加载并且您想要的元素可用于绑定(bind)。
现在，在 iframe 中向左滑动会触发 SwipeLeft()，您可以将其与主文档上的绑定(bind)结合使用以实现“全屏”滑动。
关于javascript - iframe 与 hammer.js 手势冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17307907/