简单实用,搬砖党专属,能力有限,一天的结晶,写完自己都笑了,真菜,哈哈哈哈
1.父页面监听,以下代码放入即可
function receiveMessageFromIframePage (event) { console.log(‘receiveMessageFromIframePage‘, event) if(event.data == "right-move"){ swiper.slidePrev(); }else if(event.data == "left-move"){ swiper.slideNext(); } } //监听message事件 window.addEventListener("message", receiveMessageFromIframePage, false);
2. iframe子页面放入
setPostMessage() function setPostMessage(){ let _startX, _endX, _body = document.querySelector("#app"); _body.addEventListener("touchstart", mousedown, false); _body.addEventListener("touchmove", mousemove, false); _body.addEventListener("touchend",mouseup , false); function mousedown(e) {_endX=_startX = e.clientX ? e.clientX : e.touches[0].clientX;} function mousemove(e) {_endX = e.clientX? e.clientX : e.touches[0].clientX;} function mouseup(){ if (!_startX&&!_endX) {return;} if (_endX - _startX > 100) { window.parent.postMessage("right-move", "*") } else if (_startX - _endX > 100) { window.parent.postMessage("left-move", "*") } } }
记录一次华为大屏操作,swiper中引入iframe滑动的问题处理
原文:https://www.cnblogs.com/zhenchaojia123/p/13156742.html