移动端的html页面是多屏的,通过touch事件来翻页,现在页面中嵌套一个iframe页面,当当前屏幕是iframe的时候,滑动页面是不能翻页的,应该是iframe里面的页面把touchu事件监听到了,不会传递给父页面了,请问这个有什么办法可以解决吗?
我使用的是iSlider.js来做的屏幕切换,demo中是上下滑动,第二屏中嵌入了一个iframe,如下图所示:
根据题猪提供的测试案例调试了下, 发现 iSlider 无法捕获到iframe中的 touchmove事件。
如果要解决上述问题确实比较蛋疼,得在 iframe中监听 touchmove事件,然后在合适的时机(页面滑到底部/顶部)告诉父级页面,执行翻页操作(这种方法太 ugly 啦~)。
如果你可以保证你的的 iframe不会出现滚动条,或者即使出现也不让用户滚动的话,那么你可以给iframe一个属性值pointer-events: none;,这是最简单的解决问题的方式(不完美~)。
另外,我决定比较好的方案是采用 ajax 请求的方式来获取 iframe 中的内容,然后填充到一个容器中,这样就不存在上述问题了。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。