Question

我正在使用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新手。

非常感谢您提供的任何帮助。

赖安

Answer 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（），您可以将其与主文档上的绑定结合使用，以实现“全屏”滑动。

iframe与hammer.js手势冲突

1 个答案: