iframe标签内元素添加手势滑动事件

最新推荐文章于 2024-07-08 15:34:48 发布

一生有你2020

最新推荐文章于 2024-07-08 15:34:48 发布

阅读量2.9k

点赞数 1

分类专栏： HTML 文章标签： iframe标签内元素添加手势滑动事件

本文链接：https://blog.csdn.net/yishengyouni95/article/details/82467702

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求：通过手势滑动控制<div class="fullPage"></div>的显示和隐藏

因为在body内添加监听事件无法捕捉到iframe内页面的手势动作，所有需要在iframe里添加监听事件。

代码如下：

html

<body id="body">
<div>
    <iframe id="iframe" style="width: 100vw;height: 100vh" src="/m/index" name="index">   
    </iframe>
    <div class="fullPage" id="miniPlayer"></div>
</div>
</body>

$(function () {
        $("#iframe").on("load", function(event) {
            //判断 iframe是否加载完成
            document.getElementById("iframe").contentWindow.document.getElementsByTagName("body")[0].addEventListener("touchstart", touchStart, false);
            document.getElementById("iframe").contentWindow.document.getElementsByTagName("body")[0].addEventListener("touchmove", touchMove, false);
            document.getElementById("iframe").contentWindow.document.getElementsByTagName("body")[0].addEventListener("touchend", touchEnd, false);
        });

    });

    function touchStart(e) {
        startX = e.touches[0].pageX;
        startY = e.touches[0].pageY;
    };

    function touchMove(e) {
        moveEndX = e.touches[0].pageX;
        moveEndY = e.touches[0].pageY;
        X = moveEndX - startX;
        Y = moveEndY - startY;

        if (Math.abs(X) > Math.abs(Y) && X > 0) {
            console.log("left 2 right", Math.abs(X) - Math.abs(Y));
        }else if (Math.abs(X) > Math.abs(Y) && X < 0) {
            console.log("right 2 left", Math.abs(X) - Math.abs(Y));
        }else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
            if (Math.abs(Y) - Math.abs(X) > 1) {
                console.log("top 2 bottom", Math.abs(Y) - Math.abs(X));
                hiddenMinAudio = false;
                $("#miniPlayer").fadeIn("slow");
            }
        }else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
            if (Math.abs(Y) - Math.abs(X) > 1) {
                console.log("bottom 2 top", Math.abs(Y) - Math.abs(X));
                hiddenMinAudio = true;
                $("#miniPlayer").fadeOut("slow");
            }
        }else {
            // console.log("just touch");
        }
    }
    function touchEnd(event) {

    };