Question

我在这个链接中使用jquery库： http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

使用此代码：

$("#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 });

几乎在网站的每个页面上都很好地工作，一个页面是主要的iframe对象。像这样：

<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>

我的想法是它无法在iframe代码中捕获手势，因为它不“真正”属于我自己的网站代码，即使我正在构建我自己的网站URL ..任何想法是否有可能绕过它？

Answer 1

我认为，您不能将点击，关键字等事件添加到<iframe>。相反，您必须在iframe的document上附加事件。

我不知道如何将touchwipe的事件添加到<iframe>，但是例如添加“click”事件。它将是：

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

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

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

Meaby，你必须做这样的事情：

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

祝你好运！

Answer 2

您可以在此iframe上放置一个透明的div元素，以便通过此div上发生的touchwipe事件得到通知：

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"));

当您点击此叠加div时，它应该被隐藏，以便用户能够与iframe内容进行交互：

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

当用户点击iframe外部时，请'#overlay-div'＆＃34;可见＆＃34;再次：

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

最后但并非最不重要的是，将touchwipe附加到此叠加div：

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

希望这也有助于你。

响应式html捕获iframe元素

2 个答案: