ios移动端iframe嵌套问题

最新推荐文章于 2023-12-21 16:03:23 发布

qq_45200869

最新推荐文章于 2023-12-21 16:03:23 发布

阅读量477

点赞数

分类专栏：笔记文章标签： ios

本文链接：https://blog.csdn.net/qq_45200869/article/details/114979379

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

ios移动端iframe嵌套问题

一、内容超出iframe宽度

在iframe外嵌套一层div，加上样式如下：

<div style="width: 100%; height: 90%;-webkit-overflow-scrolling: touch;  overflow: auto;">
	<iframe align="center" height="100%" width="100%" frameborder="0" src=""></iframe>
</div>

如上设置后，如果还是不行，就需要获取设备大小，动态设置iframe宽高；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_45200869

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

h5 iframe嵌套页面_汇总IOS下奇葩BUG以及iframe嵌套页面带来的一些困扰

weixin_39647499的博客

12-19

1858

做H5开发，安卓和IOS的兼容问题经常会困扰我们，尤其是跟第三方平台合作，用到iframe嵌入式应用，令很多Web前端开发的童鞋脑壳疼，相信大家也入了不少坑，且踩且珍惜吧，呵呵^_^。今天抽时间整理一些出来，希望能帮助到大家。iframe自动变宽了，在IOS手机上出现滚动条第一步：定义 iframe 中的scrolling属性为no，设置iframe中不显示滚动条。第二步：设置iframe的样式为...

移动端H5嵌入iframe滚动问题

Joyce的前端日常

05-23

9363

背景 (1) 实现功能如图，悬浮窗中为iframe，如果超出容器大小实现滚动。 (2) 问题在iOS上，悬浮窗中的内容如果不是iFrame是可以滚动的，但换成iframe后就无法在其中滚动。解决方案 (1) 思路问题在于overflow: auto或者overflow: scroll没有生效。需要在容器上加上： height: 57vh; overf...

参与评论您还未登录，请先登录后发表或查看评论

ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)

01-20

最近做微信公众号页面，因为入口不同，需要把公共页面抽取出来，然后根据不同的值，传递给后台不同的入口。刚开始用iframe页面嵌套（第一次尝试使用），但发现iOS系统对iframe嵌套页面的高度和定位控制的不到位，具体表现为，当嵌套的子页面的高度大于父页面的高度，且子页面中有触发弹框事件时，这时，如果子页面高度远远大于父页面高度，就会出现弹框找不到的情况，其实可能是在视口以下，弹框的位置只是相对于子页面来定位，并没有相对于视口定位。尝试了好多种方法，均不理想，而安卓系统则表现良好，于是想到，iOS系统可直接做页面跳转，而安卓系统则正常使用iframe（如果安卓系统直接做页面跳转，会有问题，故使

ios iframe问题

weixin_42670357的博客

11-14

297

<div class="home" v-show="selectedLabel===0"> <iframe leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" fra...

iOS设备使用iframe标签

Chenliaoyuan的博客

10-27

2683

近期在学前端，学到audio标签的时候就萌生了自己写一个播放器的想法。原本是在电脑端用的，但分享到微信或者QQ的时候，一般都是用手机打开。突然发现iOS不支持iframe标签滚动，为了让iOS也兼容iframe，需要设置几个css属性。我使用了iframe标签装载一个页面显示音乐列表，代码如下：  <div id="musicList" class="...

当ios遇到iframe出现的问题调研

热门推荐

张张张的博客

12-20

1万+

ios中iframe不兼容的问题和解决方法

iframe在ios设备宽度不能100%

HELLO WORLD

06-23

2981

不知道大家是否有遇到过使用iframe嵌套其他域名的情况。眼下我就遇到了一个项目，项目出于开发中，但是客户要求使用正式域名访问。所以我们在正式服务器上放了一个页面使用iframe嵌套测试域名。但是过程中遇到了一个问题iframe在ios设备宽度不能100%，只能显示一半，如下图：但是在安卓手机上面访问是正常的。历经千辛万苦，终于找到一丝眉目。原来当”scrolling”设置...

处理移动端iframe中input框的一些总结

kitt15的博客

11-03

741

最近项目中的移动端使用iframe作为字容器，在处理input遇到一下一些问题。 1、点击input时，input不会自动显示在键盘上方。解决方法：当focus将输入框呈现在可视位置。 $("iframe").contents().on('focus',"input[type=\"text\"],textarea", function(){ var target = this; ...

iframe内嵌一个URL 在ios手机端显示左右被撑大即使设为100% 可左右拉动

qq_35091566的博客

02-23

3076

最后解决的办法：办法1：强制把iframe的宽度设为 width：10rem !important办法二：<iframe frameborder="0" id="pptFrame" scrolling="no" class="frame" allowfullscreen src="{{ article.frameUrl }}"></iframe>然后判断设备类型要是安卓则把scrol

iframe 内嵌网页在移动端无法滚动及多滚动条问题

flynn_

10-09

4080

优化iframe 在手机上无法正常滚动及添加包裹容器后出现两个滚动条 html 部分 <el-dialog center title="预览" append-to-body custom-class="prev-dialog" :modal="false" :fullscreen="true" :visible.sync="prevDialogVisiable" > <div class="prev-dialog-content"> &lt

iframe在ios宽度扩大解决方案

coding...

03-07

1296

转自：https://www.jianshu.com/p/c71174b378ab 样式 <style> #iframe { margin-top: 44px; width: 100%; height: 100%; display: block; vertical-align: bott...

iframe在iphone手机上的问题与解决方案

web前端开发

03-12

1690

来源 |http://www.fly63.com/article/detial/7370问题1：通过document.addEventListener("scroll",...

html5 ios iframe src,如何让IFrame在iOS Safari中响应？

weixin_39654848的博客

06-16

286

问题在于，当您必须使用IFrame将内容插入网站时，那么在现代网络世界中，预计IFrame也会响应。从理论上讲，它很简单，只需要使用或设置CSS宽度，iframe { width: 100%; }但在实践中它并不是那么简单，但它可以。如果iframe内容完全响应并且可以在没有内部滚动条的情况下自行调整大小，那么iOS Safari将调整大小而iframe没有任何实际问题。如果您考虑以下代码：Ifr...

iOS 中微信等app h5 页面 iframe 调用高度自扩展问题及解决

dx_shendu的博客

06-02

562

但是这种方法会导致 iframe 中的 content 显示不全，超出 iframe 高度的部分会直接被裁剪掉。第二种：用一个 div 包裹 iframe，并在 div 中处理滚动事件。第一种：直接将 iframe 设置成 scrolling no。

Vue 使用iframe嵌入页面，ios显示空白，安卓正常