logo标签列表

iframe与hammer.js手势冲突

javascriptiframetouchhammer.js
5
我正在使用hammer.js [jQuery插件版本]提供简单的触摸手势，这里我只是使用swipeleft和swiperight来在页面之间进行导航。所有的工作都很好，但是......
在某些页面上，我有一个
感觉有点作弊，但是你可以在播放器上方放置一个不可见的元素，这样就会停止 YouTube 按钮的工作。我认为问题在于 Hammer 不是从 iframe 内部运行，而浏览器将其视为两个单独的页面。我对浏览器如何处理 iframes 并不是专家，也从未使用过 Hammer（尽管现在会去了解一下），但我怀疑现在没有完美的解决方案。:( - Jamie Taylor
@JamieTaylor - 我遇到了一个类似的问题，建议只在拖动iframe上的对象时这样做，他们只在拖动期间创建了对象。我一开始认为这就是答案，直到意识到他们之所以能这样做是因为他们的操作始于iframe之外。而且正如你所说，该元素将阻止Youtube按钮的工作，这也不是理想的选择。目前，我正在考虑改变我包含YouTube视频的方式，也许使用MediaElements.js，但同样并非完美的选择... - RyanS
刚试用了MediaElement.js，但它并没有解决这个问题，因为MediaElement.js会插入一个iframe... - RyanS
1个回答
5

我有类似的需求，我所做的是将我的滑动事件附加到<body>标签下的iframes中，就像这样：

// 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()，您可以将其与主文档上的绑定配对，以实现“全屏”滑动。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接