All geek questions in one place

Iframe runs counter to hammer.js

I use hammer.js [the jQuery plugin version] to provide simple touch gestures - in this case I use swipeleft and swiperight to navigate between pages. Everything works well except ...

On some pages, I have an <iframe> to display Youtube videos. When the gesture starts with an <iframe> , javascript does not start to load the next page, because the context is an <iframe> and not the rest of the page. If this gesture starts somewhere else on the page [even if it ends with <iframe> ], the next page loads properly.

What I want to have is gesture recognition anywhere in the window, not an iframe.

I have done quite a lot of googling, but I have not yet come up with a working solution.

Here is my Jammer Jammer code:

 var hammertime = Hammer('html').on("swipeleft", function(event) { document.location = "http://www.example.com/"; });

And here is the standard YouTube <iframe> code:

 <iframe width="100%" src="http://www.youtube.com/embed/Gh5XWWXHVQk?rel=0" frameborder="0" allowfullscreen></iframe>

I am also a little new to JS.

Any help you can give would be greatly appreciated.

Ryan

+4
source share
1 answer

I had a similar requirement, and what I did attached my swipe events to iframes <body> as follows:

 // 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(); }); }

Loading onload ensures that the document completes loading and the desired item is available for binding.

Now scrolling anywhere in the iframe calls SwipeLeft (), you can associate this with the anchors in the main document to achieve full screen.

+3
source

Source: https://habr.com/ru/post/1488175/

More articles:


All Articles