Rya*_*anS 4 javascript iframe touch hammer.js
我正在使用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确保文档已完成加载,并且您想要的元素可用于绑定.
现在向左滑动iframe中的任何位置都会触发SwipeLeft(),您可以将其与主文档上的绑定结合使用,以实现"全屏"滑动.