Safari在iOS 8用户代理上:Mozilla/5.0 (iPad;CPU OS 8_3(如Mac OS X) AppleWebKit/600.1.4 (KHTML,如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报告此错误?有人知道解决这个问题的方法吗?
我们想出了一个解决办法。
首先试着确定它是否是iPad Mobile:
if (navigator.userAgent && navigator.userAgent.indexOf("AppleWebKit") != -1 && navigator.userAgent.indexOf("Mobile") != -1) {
preventIPadSelectCrashes();
}
接下来我们需要在select:
上面叠加一个输入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++;
});
};
最后还有一个方法来维护输入在选择上的位置。它只是保持输入在select上的位置