Safari通过输入在iFrame上崩溃

时间:2015-05-21 17:46:39

标签: iframe ios8 safari crash

iOS 8用户代理上的Safari: Mozilla / 5.0(iPad; CPU OS 8_3,如Mac OS X)AppleWebKit / 600.1.4(KHTML,如Gecko)版本/ 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 个答案:

答案 0 :(得分:1)

我们想出了一个解决方案。

首先尝试确定它是否是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上的位置。它只是保持输入在选择上的定位。