在 Mobile Safari 中显示 iFrame:完整指南
将 iFrame 合并到移动 Web 应用程序中可能是一项挑战,尤其是在旨在限制其尺寸。尽管设置了高度和宽度属性,iframe 可能仍然不受约束。
解决方案:
将 iframe 包含在 div 中以控制其尺寸。然而,这种方法在 iframe 中引入了滚动限制。
要克服这个问题,请实施以下策略:
- JavaScript 集成: 在 iframe 中放置一个脚本内容。
- 事件处理: 监听触摸事件iframe。
- 父级通信:通过 JavaScript 通知父级 div 有关滚动事件。
示例代码:
iframe 的 JavaScript:
setTimeout(function () { var startY = 0; var startX = 0; var b = document.body; b.addEventListener('touchstart', function (event) { parent.window.scrollTo(0, 1); startY = event.targetTouches[0].pageY; startX = event.targetTouches[0].pageX; }); b.addEventListener('touchmove', function (event) { event.preventDefault(); var posy = event.targetTouches[0].pageY; var h = parent.document.getElementById("scroller"); var sty = h.scrollTop; var posx = event.targetTouches[0].pageX; var stx = h.scrollLeft; h.scrollTop = sty - (posy - startY); h.scrollLeft = stx - (posx - startX); startY = posy; startX = posx; }); }, 1000);
父级的 HTML div:
<div> <p><strong>注意:</strong>当 iframe 内容不受您控制时,您可以在 iframe 上创建覆盖层并实现类似的滚动功能。但是,与 iframe 内容的交互(例如单击链接)将受到限制。</p> <p><strong>其他注意事项:</strong></p> <ul> <li>在 iOS 6 及更高版本中,此解决方案不适用工作时间更长,并且尚未发现可靠的替代方案。</li> <li>远程 Web 检查器(Safari 的调试工具)现在需要 Mac,这使得设备上调试更具挑战性。</li> </ul> </div>
以上是如何使 iFrame 在 Mobile Safari 中可滚动?的详细内容。更多信息请关注PHP中文网其他相关文章!
声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

您是否曾经在项目上需要一个倒计时计时器?对于这样的东西,可以自然访问插件,但实际上更多


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影:贝壳谜语解决方案
2 周前ByDDD
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

Dreamweaver Mac版
视觉化网页开发工具

禅工作室 13.0.1
功能强大的PHP集成开发环境