移动设备端网页中iframe遇到了问题
最编程
2024-08-01 18:02:33
...
// 用的vue
function debounce(fn, time = 1000) {
let timer = null;
return v => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn(v);
}, time);
}
}
mounted() {
// 这里 第三个参数要设置为true，不然移动端监听不到滑动事件
// debounce防抖函数
window.addEventListener('scroll', debounce(this.onScroll), true);
},
destroyed() {
// 移除监听事件
window.removeEventListener('scroll', debounce(this.onScroll), true);
},
methods: {
onScroll() {
let scrollTop = 父容器的scrollTop;
// if (scrollTop > 两个iframe的高度之和 - 距离底部的安全距离) {
if (scrollTop > this.totalIframeHeight - 500) {
// 这里就可以让底部按钮高亮了
}
},
// 动态设置iframe高度；禁止iframe可滑动
// 这里的flag用来区分是哪个iframe；这里用top、bottom来区分上下两个iframe
setIframeHeight(iframe, flag) {
const that = this;
iframe.onload = function() {
iframe.height = iframe.contentDocument?.body?.scrollHeight || '100%';
if (flag === 'top') {
that.topIframeHeight = iframe.contentDocument?.body?.scrollHeight || 0;
// 用变量来记录iframe是否加载成功
that.hasTopIframeLoaded = true;
} else if (flag === 'bottom') {
that.hasBottomIframeLoaded = true;
that.bottomIframeHeight = iframe.contentDocument?.body?.scrollHeight || 0;
// 用变量来记录2个iframe的高度之和，在scroll事件中要用到
if (that.hasTopIframeLoaded && that.hasBottomIframeLoaded) {
that.totalIframeHeight = that.topIframeHeight + that.bottomIframeHeight;
}
// 因为遇到的问题时第二个iframe滑动有问题，所以单独处理第二个
if (iframe.contentDocument && iframe.contentDocument.body) {
// 这点很重要；不然Android上会有很神奇的bug
// 为啥不直接写iframe.contentDocument?.body?.style.overflow = 'hidden';因为编译会报错
iframe.contentDocument.body.style.overflow = 'hidden';
}
// 禁止iframe的滑动事件
// 这里要用 { passive: false }，而不是 false
iframe.contentDocument?.body?.addEventListener(
'touchmove',
function(e) {
e.preventDefault();
e.stopPropagation();
}, { passive: false }
)
}
}
}
}
推荐阅读