Safari 在 iFrame 上使用输入崩溃
Posted
技术标签:
【中文标题】Safari 在 iFrame 上使用输入崩溃【英文标题】:Safari Crashing on iFrame with input 【发布时间】:2015-05-21 17:46:38 【问题描述】:ios 8 用户代理上的 Safari: Mozilla/5.0 (iPad; CPU OS 8_3 like Mac OS X) AppleWebKit/600.1.4 (Khtml, like Gecko) Version/8.0 Mobile/12F69 Safari/600.1.4)
我们有两个名为outer.html 和inner.html 的文件。 outer.html 的内容是:
<select>
<option></option>
<option>Value 1</option>
<option>Value 2</option>
</select>
<br/><br/>
<iframe src="inner.html" style="width: 150px; height: 40px; overflow: hidden; border: none;"></iframe>
inner.html的来源是:
<input type="text" style="width: 100%">
当您单击 iframe 中的输入时,会出现虚拟键盘。如果在没有先关闭键盘的情况下点击选择框,浏览器会崩溃。 Chrome 不会出现这种行为。
是否有任何注册的 Apple 开发人员可以验证此错误并将其报告给 Apple?有谁知道解决这个问题的方法?
【问题讨论】:
【参考方案1】:我们想出了一个变通办法。
首先尝试确定是否是 iPad Mobile:
if (navigator.userAgent && navigator.userAgent.indexOf("AppleWebKit") != -1 && navigator.userAgent.indexOf("Mobile") != -1)
preventIPadSelectCrashes();
接下来我们需要在选择的顶部覆盖一个输入:
preventIPadSelectCrashes = function()
var selectOverlayId = 1;
jQuery('select').each(function()
var select = jQuery(this);
var selectOverlay = jQuery("<input>", id: 'selectOverlay' + selectOverlayId, type: 'text', style: 'border: none; background: transparent;', 'z-index': overlayZIndex);
select.after(selectOverlay);
jQuery(document).on("focus", '#selectOverlay' + selectOverlayId, function()
jQuery(this).blur();
jQuery(this).css('z-index', -1000);
select.focus();
);
select.on("blur", function()
selectOverlay.css('z-index', overlayZIndex);
);
maintainSelectOverlay(select, selectOverlay);
selectOverlayId++;
);
;
最后有一种方法可以保持输入在选择上的位置。它只是保持输入在选择上的定位。
【讨论】:
以上是关于Safari 在 iFrame 上使用输入崩溃的主要内容,如果未能解决你的问题,请参考以下文章
Safari 浏览器在重定向 window.location 时崩溃
iPhone 和 iPad 上的 Safari 在缩放时崩溃(双击和捏合)