javascript - touch事件移动端页面里面嵌套iframe
黄舟
黄舟 2017-04-10 15:19:55
[JavaScript讨论组]

移动端的html页面是多屏的,通过touch事件来翻页,现在页面中嵌套一个iframe页面,当当前屏幕是iframe的时候,滑动页面是不能翻页的,应该是iframe里面的页面把touchu事件监听到了,不会传递给父页面了,请问这个有什么办法可以解决吗?

测试页面:http://demo.nuonuo.me/

我使用的是iSlider.js来做的屏幕切换,demo中是上下滑动,第二屏中嵌入了一个iframe,如下图所示:

当我在百度这个页面移动的时候,整个屏幕是不会切屏的,只会移动内部的页面,请问大家有什么解决办法吗,我测试过即使iframe里面的页面是不能滑动的时候,滑动iframe的时候,屏幕也不会切屏移动

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(2)
高洛峰

根据题猪提供的测试案例调试了下, 发现 iSlider 无法捕获到iframe中的 touchmove事件。
如果要解决上述问题确实比较蛋疼,得在 iframe中监听 touchmove事件,然后在合适的时机(页面滑到底部/顶部)告诉父级页面,执行翻页操作(这种方法太 ugly 啦~)。

如果你可以保证你的的 iframe不会出现滚动条,或者即使出现也不让用户滚动的话,那么你可以给iframe一个属性值pointer-events: none;,这是最简单的解决问题的方式(不完美~)。

另外,我决定比较好的方案是采用 ajax 请求的方式来获取 iframe 中的内容,然后填充到一个容器中,这样就不存在上述问题了。

迷茫

使用h5的postMessage即可完成iframe与页面的通信

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号