由于焦点问题，iframes在移动浏览器中中断
在移动safari/chrome的iframe中帮助处理异常的焦点事件。
目前我们正在开发一个crm web应用程序，我们决定使用iframe来隔离客户端逻辑，这样就不会造成任何其他形式的工作/数据输入的丢失--我知道这本身就足以容纳过多的意见和争论--这不是我要问的……
页面结构如下：
固定位置标题固定位置左导航/菜单固定位置主要内容
即
<body>
<nav id="header" style="position: fixed; left: 0; right: 0; top: 0; height: 50px;">
(...your imagination here...)
</nav>
<aside id="leftNav" style="position: fixed; left: 0; top: 50px; bottom: 0; width: 225px">
(...even
</aside>
<section id="mainContent" style="position: fixed; left: 225px; top: 50px; right: 0; bottom: 0; overflow: auto; -webkit-overflow-scrolling: touch">
<div id="loadingImage"></div>
<iframe id="frame_1" style="position: absolute; height: 100%; width: 100%" src="..."></iframe>
</section>
</body>我禁用了touchmove事件，但#mainContent仍然可以滚动。我遇到的问题是(在mobile-safari中)当用户触摸呈现在顶部文件夹下的输入时(据我所知)，键盘会显示，主要部分将输入滚动到仅供查看的位置，而不会...这就是我开始考虑喝酒的时候..。可滚动元素似乎“弹回”屏幕，导致它重新绘制-然后滚动主要部分到顶部，隐藏选择的输入-或者在某些罕见的情况下，实际上在坐标小于scrollTop值时触发单击事件(向下滚动300px，单击输入，但现在选择了上面300px的输入...)。
在iPad上用chrome打开相同的站点...打开百加得酒--似乎什么都不管用...
我快要疯了，在我5年的职业生涯中，我第一次拼命地寻求帮助……iframes正在成为浏览器负面关注的焦点吗？我们是否应该重新考虑我们的客户端结构？任何想法都将不胜感激
-Matt
回答 1
Stack Overflow用户
发布于 2013-10-17 03:22:57
好吧，事实证明，在iframe中呈现的元素的css属性‘-webkit-外观: none’导致了这个问题-移除css似乎允许iframe的滚动高度现在可以正确调整，最终在触发焦点事件时不会弹跳……我会说它不是防弹的--每一次它都会变得“疯狂”，但我们在骗谁呢……我有一个iPad，这样我的孩子就可以玩“愤怒的小鸟”，而不是任何与“工作”有关的东西；
：~)
-matt
https://stackoverflow.com/questions/19300806
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号