IOS Safari 支持可滚动 iframe

最新推荐文章于 2022-11-24 14:23:43 发布

原创最新推荐文章于 2022-11-24 14:23:43 发布 · 845 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IOS #Safari #iframe

IOS 同时被 3 个专栏收录

1 篇文章

订阅专栏

Safari

1 篇文章

订阅专栏

CSS3

1 篇文章

订阅专栏

本文介绍了一种在Safari浏览器中实现可滚动iframe的方法，通过为父容器添加CSS3属性-webkit-overflow-scrolling:touch，解决了iframe在Safari中无法正常滚动的问题。

Safari 支持可滚动 iframe的方法：

在父容器添加 CSS3 属性 "-webkit-overflow-scrolling:touch"

<div style="overflow:auto;-webkit-overflow-scrolling:touch">
  <iframe src="./content.html" style="width:100%;height:100%">
</div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

子澈课堂

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CrossDomainStorage:具有API的跨域存储解决方案，可通过iframe存储数据。在除Safari之外的所有浏览器上使用本地存储。由于默认选项“来自第三方和广告商”，因此在Safari上使用Cookie。

05-24

跨域存储具有API的跨域存储解决方案，可通过iframe存储数据。在除Safari之外的所有浏览器上使用本地存储。由于默认选项“来自第三方和广告商”，因此在Safari上使用Cookie。基本用法首先，创建一个带有url的通道以保存数据。 CrossDomainStorage .newChannel('storage', 'http://localhost:8001/storage.html') .save('sampleKey', 'sampleData'); 对于您在上面指定的url，创建一个接收数据的通道。 CrossDomainStorage .newChannle('parent'); 原料药 CrossDomainStorage.newChannel(channelName, [url]) 创建一个带有名称的频道。如果传递了网址，则会创建一个通道，该通道

使IFRAME在iOS设备上支持滚动

weixin_34234829的博客

07-10

330

原文链接: Scroll IFRAMEs on iOS原文日期: 2014年07月02日翻译日期: 2014年07月10日翻译人员: 铁锚很长时间以来, iOS设备上Safari中超出边界的元素将不能滚动,处理这种问题对开发人员来说一直是种折磨。对原文作者的博客来说,这特别让人无奈,因为demo程序都是在沙箱IFRAMEs中运行的,这是为了不影响博客网站的AJAX页面加载策略. 通过一些...

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

ios iframe 滚动_在iOS上滚动IFRAME

culuo8053的博客

07-28

214

ios iframe 滚动For the longest time, developers were frustrated by elements with overflownot being scrollable within the page of iOS Safari. For my blog it was particularly frustrating because I displ...

iPhone Safari下iframe不显示滚动条无法滚动的解决方法

wangchaoqi1985的博客

05-28

322

iPhone Safari下iframe不显示滚动条无法滚动的解决方法

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

08-30

总结来说，解决iOS不支持`iframe`的问题主要是通过检测设备类型，然后针对不同设备采取不同的加载策略。对于Android，使用`iframe`嵌套；而对于iOS，采用页面重定向，避免`iframe`带来的兼容性问题。这种方法可以...

IOS上iframe的滚动条失效的解决办法

09-01

在iOS设备上，如iPad和iPhone，用户可能会遇到一个特定的问题，那就是在使用`iframe`时，滚动条无法正常工作。当`iframe`的内容高度超过其设定的高度时，内部HTML的滚动条不会显示，导致超出部分的内容无法查看，...

在iPhone Safari上滚动iframe元素的JavaScript解决方案

本文档将详细探讨如何在iPhone Safari等智能设备上滚动iframe元素，并主要利用JavaScript技术来实现这一功能。" 知识点详细说明： 1. iframe基础知识 - iframe是HTML中的一个元素，它代表了一个HTML页面插入到...

ios iframe 无法滚动

最新发布

06-19

我们正在解决iOS设备上iframe无法滚动的问题。根据经验，iOSSafari在处理iframe滚动时存在一些限制，通常需要特殊的处理方式。常见的解决方案是给iframe添加一个包裹层...[^^2]: iOS Safari滚动行为参考Apple开发者文档

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

weixin_39647499的博客

12-19

2174

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

ios上iFrame滚动条失效

夏至的博客

04-16

2062

在做公户号的时候，有一个页面引入了IFrame。然后出现了一个很尴尬的问题，iframe不出现滚动条，而且在屏幕高度以外的内容都被截掉了。百度之后，找到了解决方案，亲测可行~要点只要两个：1.将iFrame包裹在一个div中；2.给这个div赋予一个已出滚动样式。以下给出代码：jsp部分：<div class='scroll-wrapper'><iframe src='***' ...

完美解决 IOS系统safari5.0 浏览器页面布局iframe滚动条失效问题

baohuan_love的专栏

07-24

6110

完美解决 IOS系统safari5.0 浏览器页面布局iframe滚动条失效问题

ios上iframe滚动条失效

CaseyWei

07-26

403

最近有个需求要把后台改成手机也能浏览，一些数据表格都是用的iframe，在手机上浏览iframe设置了高度（例如500px）。倘若iframe的内容足够长超出了iframe设定的高度时，在iphone,ipad等设备上。iframe内部html的滚动条不出现。并且活生生的从500px处截断，（类似overflow：hidden的效果）下面的内容不再显示。上网查了资料：可以在iframe外加...

解决IOS上iframe不能水平滑动的问题

xiaonan12386的博客

06-18

759

最近用bootStrap 写了一个响应式网站，但是到了IOS上面就出现不能滑动了，在网上查询了很多资料，有一些说的有道理，但是与我的项目是不是很吻合，只能按照前辈的提示，一次次的试错，总算是解决了。、首先需要一个div将iframe包裹起来，并且这个包裹的div还要设置属性： style="overflow: scroll;" <div class="row J_mainCont...

解决iframe在ios中无法滚动的bug

十步杀一人-千里不留行

12-29

5437

https://fly.layui.com/jie/32020/(无效) 修改方法：1、在嵌入进iframe的每个页面的<body>里面加个id，如<body id="iosiframe">2、引入jquery，并新增js代码： var ua = navigator.userAgent.toLowerCase(); var screenwidth = wi...

前端iframe框架在火狐、谷歌、Safari浏览器下如何快速查看页面地址src

chuangxin的专栏

04-24

4664

有个饮料企业进销存应用，采用的是每个TAB页加载一个iframe，然后用iframe加载jsp页面。在实际开发、测试中，往往需要快速定位到当前Active的TAB页对应的Iframe加载的是具体哪个页面，方便修改。以火狐、谷歌和Safari浏览器为例，简单看下如何快速查看iframe加载的页面信息。 1、火狐浏览器鼠标右键，在此框架菜单下有很多二级菜单，比较常用的有： 1）仅显示此框架，当前页...

iFrame的sandbox配置

m0_46660770的博客

08-01

2538

记录学习日常

【前端安全必修课】iframe沙箱全解析：5分钟构建牢不可破的第三方内容容器

企业管理者×前端码农，分享协作与代码的平衡术。拆系统逻辑×雕用户体验，深耕框架|效能|领导力...

10-20

6739

【前端安全必修课】iframe沙箱全解析：5分钟构建牢不可破的第三方内容容器......

HTML ＜iframe＞ sandbox属性

没有简介

11-24

2820

沙箱属性的值将被简单地沙箱化(然后应用所有限制)，或者以空格分隔的预定义值列表将消除实际限制。支持的浏览器：下面列出了HTML video preload属性支持的浏览器。sandbox属性允许对iframe中的内容进行其他限制。