2

I am using jquery library from this link: http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

With this code:

$("#form-iframe").touchwipe({
     wipeLeft: function() { alert("left"); },
     wipeRight: function() { alert("right"); },
     wipeUp: function() { alert("up"); },
     wipeDown: function() { alert("down"); },
     min_move_x: 20,
     min_move_y: 20,
     preventDefaultEvents: true });

Working great almost on every page of the website beside one page that primary an iframe object. Like this :

<iframe id="form-iframe" src="match.php?p=<?php echo $phone ?>" style="margin:0; width:100%; height:550px; border:none; overflow:hidden; margin-bottom: -30px;" scrolling="no" onload="AdjustIframeHeightOnLoad()"></iframe>

My thought that It cannot capture gesture inside the iframe code because it does not "really" belong to my own website code even tho I am framing my own site URL.. Any ideas if it possible to bypass that ?

Daniel Iliaguev
  • 49
  • 1
  • 9

2 Answers2

0

I think than you can´t add events like click, keyup, etc to an <iframe>. Instead you have to attach events on the iframe´s document.

I don´t know how to add touchwipe´s events to an <iframe>, but for example for add "click" event. It will be:

let iframe = document.getElementById("form-iframe");
let documentIframe = iframe.contentWindow.document;

function handleClick(event) {
    alert("One click");
}

documentIframe.addEventListener("click", handleClick, false);

Meaby, you have to do something like this: 

let iframe = $("#form-iframe").contents();

iframe.find('HTML-Element').touchwipe({
     wipeLeft: function() { alert("left"); },
     wipeRight: function() { alert("right"); },
     wipeUp: function() { alert("up"); },
     wipeDown: function() { alert("down"); },
     min_move_x: 20,
     min_move_y: 20,
     preventDefaultEvents: true });

Good Luck!

Alexander
  • 90
  • 1
  • 3
  • 11
  • Thank you for your replay, I see what you are doing to do there and I trying to figure it out, but for now even the click event don't trigger on the iframe, are you sure this is the correct way ? – Daniel Iliaguev May 17 '18 at 13:42
  • Oh, you are right. It was my mistake, sorry. I finded another post with the same event in a iframe: https://stackoverflow.com/questions/15080222/add-click-event-to-iframe Maybe it could help you:) – Alexander May 17 '18 at 13:51
0

You could position a transparent div-element over this iframe to get notified by touchwipe-events occurred on this div:

var iframeID = '#form-iframe';
var overlayDiv = '<div id="overlay-div" style="position:absolute; background-color:transparent">';
var iframe = $(iframeID);
iframe
.parent()
.append($(overlayDiv)
.css('top',iframe.offset().top)
.css('left',iframe.offset().left)
.css("width",iframe.width()+"px")
.css("height",iframe.height()+"px"));

When you click on this overlay div, it should be hidden so that a user is able to interact with the iframe-contents:

$('#overlay-div').on('click touchstart', function(){ $(this).hide(); });

When a user clicks outside the iframe, then make '#overlay-div' "visible" again:

$(document).on('click touchstart', function(event){ if($(event.target).attr("id") != 'overlay-div')$('#overlay-div').show(); });

And last but not least, attach touchwipe to this overlay div:

$('#overlay-div').touchwipe(...);

Hope this helps you as well.

Blauharley
  • 4,186
  • 6
  • 28
  • 47
  • Great way of thinking, I thought about the same idea but couldn't realize that on code.. However your solution for some reason work only on the first swipe and that only if I didn't do anything inside the iframe first. Probably something to do with the on click event, I am trying figuring that out now.. – Daniel Iliaguev May 17 '18 at 14:12
  • Thanks, unfortunately I could not test this completely. But the overlay-div is definitely hidden and not "shown" again (for some reason) that's why touchwipe does not work anymore. You might have to call `$('#overlay-div').show()` after some wipe happened. – Blauharley May 17 '18 at 14:15
  • Update: Ok figured that out, writing this to explain to everyone else who will have the same problem. It does work ! but requires change of UI between swipes because right now the code only alerting and not really doing something else the transparent div won't change the display style back to block. In my case I using that to switch between tabs so after I changed the alert to trigger the tab it worked like a charm, thank you for the solution ! – Daniel Iliaguev May 17 '18 at 14:23
  • Just for information: `alert`-calls sometimes stops/intervenes other js-executions and might be the reason for some strange bugs. I always use console.log instead. – Blauharley May 17 '18 at 14:27
  • Nice advice, your are right will use console log from now on, thanks ! – Daniel Iliaguev May 17 '18 at 14:32