iframe与hammer.js手势冲突 [英] iframe conflicting with hammer.js gestures
问题描述
我正在使用hammer.js [jQuery插件版本]提供简单的触摸手势 - 在这种情况下，我只是使用swipeleft和swiperight - 在页面之间导航。一切都很好，除了...
I'm using hammer.js [the jQuery plugin version] to provide simple touch gestures – in this case, I'm just using swipeleft and swiperight – to navigate between pages. All works good, except...
在某些页面上，我有< iframe> 来显示Youtube视频。当手势在< iframe> 内开始时，加载下一页的javascript不会运行，因为上下文是< iframe> ; ，而不是页面的其余部分。如果手势从页面上的任何其他位置开始[即使它以< iframe> 结尾]，则下一页正确加载。
On some pages I have an <iframe> to display a Youtube video. When the gesture begins within the <iframe>, the javascript to load the next page doesn't run, as the context is the <iframe>, not the rest of the page. If the gesture begins anywhere else on the page [even if it ends in the <iframe>] the next page loads properly.
我想要的是手势在窗口的任何地方被识别，而不受iframe的影响。
What I want to have happen is for the gesture to be recognized anywhere in the window, and not be affected by the iframe.
我做过相当多的谷歌搜索，但我还没有找到一个有效的解决方案。
I've done a fair amount of googling, but I've yet to come up with a working solution.
这是我的Hammer JS代码：
Here is my Hammer JS code:
var hammertime = Hammer('html').on("swipeleft", function(event) {
document.location = "http://www.example.com/";
});
此处是标准YouTube < iframe> 代码：
And, here is the standard YouTube <iframe> code:
<iframe width="100%" src="http://www.youtube.com/embed/Gh5XWWXHVQk?rel=0" frameborder="0" allowfullscreen></iframe>
我也是一个JS新手。
非常感谢您提供的任何帮助。
Any help that you can give would be greatly appreciated.
Ryan
推荐答案
我有类似的要求，我所做的是将我的滑动事件附加到iframes < body> ，如下所示：
I had a similar requirement, and what I did was attach my swipe events to the iframes <body> like this:
// 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确保文档已完成加载并且您想要的元素可用用于绑定。
The onload ensures that the document has finished loading and the element you want is available for binding.
现在向左滑动iframe中的任何位置都会触发SwipeLeft（），您可以将其与主文档上的绑定结合起来以实现全屏滑动。
Now swiping left anywhere in the iframe will trigger SwipeLeft(), you could couple this with bindings on the main document to achieve a 'full screen' swipe.
这篇关于iframe与hammer.js手势冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
