iframe及其子页面左右滑动

不积跬步无以至千里-陕西西安

已于 2023-04-02 19:42:37 修改

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 html

于 2018-03-09 10:41:51 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41082640/article/details/79494137

本文介绍了一种在iframe内部实现触屏滑动切换页面的方法。通过监听touchstart、touchmove和touchend事件，实现了当左右滑动超过一定距离时触发页面跳转的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为iframe的特性，在父页面实现子页面滑动不现实，在iframe子页面中加入下面方法，并在加载js时执行，测试成功

function huadong() {

var startX, startY, endX, endY;
document.getElementById("wrapper").addEventListener("touchstart",
touchStart, false);
document.getElementById("wrapper").addEventListener("touchmove", touchMove,
false);
document.getElementById("wrapper").addEventListener("touchend", touchEnd,
false);
function touchStart(event) {
var touch = event.touches[0];
startY = touch.pageY;
startX = touch.pageX;
}
function touchMove(event) {
var touch = event.touches[0];
endX = touch.pageX;
}
function touchEnd(event) {
if ((startX - endX) > 100) {
parent.$("#oiframes").attr('src', 'hzlb.html');//页面跳转
} else if ((endX - startX) > 100) {
parent.$("#oiframes").attr('src', 'hlxq.html');//页面跳转
}
}