jquery触摸在iframe上滑动 [英] jquery touch swipe over iframe

问题描述

我正在尝试整理一个小应用程序，我可以在屏幕上的任何位置滑动。

I am trying to put together a small application where i can swipe anywhere on the screen.

在我想要将iframe添加到页面的某个部分之前，这一切都还可以。我希望能够知道当人们在这个区域时滑动发生的时间。这可能吗？

This was all ok until I wanted to add an iframe to a section of the page. I want to be able to be able to know when a swipe has occured when people are over this area. Is this possible?

所以#box是可滑动区域的想法

So an idea where #box is the swipeable area

<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可能有助于表明我的意思

I have put together a basic jsfiddle that might help show what I mean

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。

NB: if you need to be able to click or scroll or click inside the iframe then, you should capture the scroll or click event on this cover and apply it to the iframe.

这篇关于jquery触摸在iframe上滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！