5

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

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

瑞安

4

1 回答 1

5

我有类似的要求，我所做的是将滑动事件附加到 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()，您可以将其与主文档上的绑定结合起来以实现“全屏”滑动。

于 2014-07-17T12:11:47.267 回答