jQuery触摸滑动覆盖在iframe上。

Question

我正在尝试制作一个小应用程序，可以在屏幕的任何位置进行滑动。

这一切都很顺利，直到我想在页面的某个部分添加一个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/

- Dan

---

这里有什么好的东西吗？http://forum.jquery.com/topic/use-swipe-with-and-ifram-or-something-similar - Brian Webster

我之前已经读过了，但它并没有给我我需要的。不过还是谢谢。 - Dan

Answer 1

个人而言，我会使用一个 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>

NB: 如果您需要能够在 iframe 内部进行点击或滚动操作，则应在此覆盖层上捕获滚动或点击事件，并将其应用于 iframe。

- Petit_Nuage