jQuery的触摸滑动过的iframe(jquery touch swipe over iframe

我试图把一个小的应用程序，我可以在屏幕上的任何地方刷卡。

这是一切OK，直到我想一个iframe添加到页面的部分。我希望能够要能知道何时，当人们在这方面的刷卡已发生。这可能吗？

因此，一个想法在那里#box是滑动式区域

<div id="box">

<div id="left">
    <h1></h1>
    <p> this is some text</p>
</div>

<div id="right"> 
  <iframe src="anyurl" frameborder="0" height="430"></iframe>     
</div>

我已经把基本的jsfiddle，这可能有助于说明我的意思

http://jsfiddle.net/dwhitmarsh/v42S9/

个人而言，我会用一个div覆盖iframe中 。

 var maxTime = 1000, // allow movement if < 1000 ms (1 sec) maxDistance = 50, // swipe movement of 50 pixels triggers the swipe target = $('#box'), startX = 0, startTime = 0, touch = "ontouchend" in document, startEvent = (touch) ? 'touchstart' : 'mousedown', moveEvent = (touch) ? 'touchmove' : 'mousemove', endEvent = (touch) ? 'touchend' : 'mouseup'; target.bind(startEvent, function(e) { // prevent image drag (Firefox) // e.preventDefault(); startTime = e.timeStamp; startX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX; }).bind(endEvent, function(e) { startTime = 0; startX = 0; }).bind(moveEvent, function(e) { // e.preventDefault(); var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX, currentDistance = (startX === 0) ? 0 : Math.abs(currentX - startX), // allow if movement < 1 sec currentTime = e.timeStamp; if (startTime !== 0 && currentTime - startTime < maxTime && currentDistance > maxDistance) { if (currentX < startX) { // swipe left code here target.find('h1').html('Swipe Left').fadeIn(); setTimeout(function() { target.find('h1').fadeOut(); }, 1000); } if (currentX > startX) { // swipe right code here target.find('h1').html('Swipe Right').fadeIn(); setTimeout(function() { target.find('h1').fadeOut(); }, 1000); } startTime = 0; startX = 0; } });

 h1 { text-align: center; font-size: 24px; } #box { width: 800px; height: 600px; margin: 30px auto; background-color:#eee; } #left{ position:relative; float:left; width:40%; } #right{ position:relative; float:left; width:40%; } #right .iframe_cover{ position: absolute; width: 100%; height: 40%; top: 0; left: 0; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h1>Swipe Inside the Box</h1> <div id="box"> <div id="left"> <h1></h1> <p> this is some text</p> </div> <div id="right"> <iframe src="https://lnt.org/" frameborder="0" height="430"></iframe> <div class="iframe_cover"></div> </div> </div>

注意：如果你需要可以点击或滚动，或单击iframe内的话，你应该捕获滚动或在此盖点击事件，并将其应用到iframe中。