移动端使用iframe嵌套页面 scrolling:auto,ios出现横向滚动条问题
移动端使用iframe嵌套页面 scrolling:auto,ios出现横向滚动条问题
一、业务需求/及问题点
业务需求:开发移动端项目时,在项目网页内引用第三方网页,为此采用<iframe src=''>标签引入第三方网页
问题一:如何让iframe嵌套页面出现滚动条?
当使用<iframe src='htttps://xxx.com'> 引入第三方页面,此时页面无法出现上下滚动条,解决思路:需要引入iframe标签的scrolling属性:<iframe src='htttps://xxx.com' scrolling="auto"> ( scrolling属性可取值'yes'、'auto')既能出现上下滚动条。
解决方法:
<iframe src="https://www.xxxx.com" frameborder="0" scrolling="auto"></iframe>
问题二:scrolling取值auto,ios设备嵌套的页面出现横向滚动条?
当scrolling="auto"或scrolling="yes"时,ios出现横向滚动条,且引入的页面无法自适应移动端屏幕
大小,在浏览器和安卓设备显示正常,ios设备上却出现横向滚动条且页面无法自使用屏幕大小。解决思路: 在ios设备上scrolling取值no,通过html结构加css样式来实现上下滚动条。
解决方法:
<!-- html结构 -->
<div class="external-links"><iframesrc="https://www.xxxx.com"frameborder="0"scrolling="no"></iframe></div>
// css样式
.external-links{display: flex;height: 100%;flex-direction: column;-webkit-overflow-scrolling: touch;overflow-y: scroll;:deep()iframe {height: 100%;overflow: scroll; -webkit-overflow-scrolling: touch; min-width: 100%; width:1px;}}
问题三:如何适配Android和IOS设备?
当scrolling取值no,安卓设备不能上下滚动,且通过设置样式也无法实现上下滚动解决思路:前端通过获取用户设备信息进行判断是Android还是IOS, 为scrolling取值。
解决方法:
<!-- 根据机型为scrolling进行取值 -->
<div class="external-links"><iframesrc="https://www.xxxx.com"frameborder="0":scrolling="isIOS"></iframe></div>
const isIOS = ref<string>()
onMounted(() => {const model = navigator.userAgentconst isiOS = !!model.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // IOS机型const isAndroid = model.indexOf('Android') > -1 || model.indexOf('Adr') > -1 // Android机型if (isiOS) {isIOS.value = 'no' // ios iframe标签scrolling取值auto会出现横向滚动条,取值no手动添加css样式出现滚动条}if (isAndroid) {isIOS.value = 'auto' // Android iframe标签scrolling取值no不可以上下滚动,取值auto实现上下滚动条}})
两年的前端菜鸟, 如有理解不对的地方还恳请各位大佬给予指正, 谢谢!!!
移动端使用iframe嵌套页面 scrolling:auto,ios出现横向滚动条问题相关推荐
- h5 iframe嵌套页面_汇总IOS下奇葩BUG以及iframe嵌套页面带来的一些困扰
做H5开发,安卓和IOS的兼容问题经常会困扰我们,尤其是跟第三方平台合作,用到iframe嵌入式应用,令很多Web前端开发的童鞋脑壳疼,相信大家也入了不少坑,且踩且珍惜吧,呵呵^_^.今天抽时间整理一 ...
- vue中用iframe嵌套页面,点击返回实现真正的退回上一步功能
vue项目中需要嵌套第三方的页面,但是第三方页面中的网页没有返回按钮,如图所示:此为页面b,页面a为跳到b页面的前一个页面. 点击iframe嵌套页面跳转的第二个页面 要实现不管进入多少层iframe ...
- TP超链接无法下载问题解决 hrome浏览器默认禁止iframe嵌套页面下载文件
var urlshow="{:U('Grant/download')}&grt_id="+row['grt_id']; let link = document.create ...
- 实现iframe嵌套页面通信
实现iframe嵌套页面通信 在项目中通过iframe标签嵌入其他网页时,该如何iframe页面进行通信呢?小菜鸡在这里简单记录一下~ 1.父组件获取子组件: (注:父组件是当前项目页面,子组件是if ...
- 关于前端iframe嵌套页面的跳转问题
因工作中遇到的项目,有iframe页面嵌套,遇到了页面跳转的问题,所以记录解决问题的过程 关于前端iframe嵌套页面的跳转问题 问题: 在A页面使用iframe嵌套了B页面,B页面中做了权限校验,即 ...
- 前端Docker部署 https服务以及使用 iframe嵌套页面遇到的问题
中心思想:先部署 http服务,再部署 https服务转发到 http服务上 (如果 http和 https服务部署在同一台服务器上,可共用一个 docker容器同时部署,见 3) 前端Docker微 ...
- 调用iframe嵌套页面的方法
iframe标签定义一个id:" iframeDOM ". 调用页面用的方法: function callIframe(){document.getElementById(&quo ...
- iframe嵌套页面下载问题
出于沙盒安全性考虑,83版本的chrome浏览器默认禁止了iframe嵌套页面,通过a和window.open,localtion.href点击下载, 为了解决这个问题,可以在父页面的iframe中s ...
- vue中iframe嵌套页面父子组件互相通信
//父传子页面 <iframe id="mainIframe" name="mainIframe" ref="iframe" :src ...
最新文章
- C++函数指针解引用
- 视图属性+对象动画组件ViewPropertyObjectAnimator
- centos7 安装oracle jdk 与openjdk 实现切换
- LeetCode_617.合并二叉树
- java plus in_mybatis plus in方法使用详解
- android adb 最新版本下载地址,adb工具包2017完整版-安卓adb工具1.0.32 最新完整版下载_东坡手机下载...
- java创新创业比赛项目教程_java毕业设计_springboot框架的大学生创新创业项目管理...
- 通达OA任意用户登录漏洞手工复现
- 虚拟服务器怎么选操作系统,虚拟主机怎样选择合适的操作系统
- symbian 如何在安装时备份sis文件
- diagnosing error in object detectors 浅析
- Vue2 Element | 一文带你快速搭建网页界面UI
- 最短路(弗洛伊德——最短路)
- does not have write access to 'C:\WINDOWS\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET File
- 深度学习笔记整理(五)——提高泛化能力的方法
- HTML制作圣诞树来啦
- 路由表中preference 和metric的含义
- 自动释放内存!Facebook推出强大Android图片库Fresco
- 【渝粤教育】电大中专电子商务网站建设与维护 (15)作业 题库
- ISP PIPLINE (一) BLC 以及 线性化
热门文章
- 五问Nerf | 简单易懂的神经辐射场入门介绍
- IT运维如何完成一场高质量复盘
- 第一篇:读梁启超《李鸿章传》
- 2023年第1期-芯云未来——“FPGA 菁英挑战赛”高校进行时赛题说明
- 计算机视觉系列(二) - 霍夫线/圆变换
- 计算机毕业设计之java+springboot基于vue的智慧食堂点餐系统设计与实现
- 数据分析和《古惑仔》电影中总结出的流氓数据陷阱
- Adobe Dreamweaver 放大代码字体
- 完美解决MySQL错误日志出现大量的 Got an error reading communication packets 报错
- LNMP架构安装及搭建Discuz论坛