0

我想知道是否有人可以提供帮助。我在一个包含表单的网站上工作。提交表单时，我们会显示一个包含动画 gif 的叠加层 - 一个“请稍候”类型的东西。

当我们第一次开发代码时，我们遇到了动画 gif 的严重问题，因为它会在提交表单时挂在第一帧上。我们发现体面的浏览器 :) 都是一致的，因为我们必须显示覆盖，然后在提交表单之前等待一小段时间。我们还发现 IE 要求相反 - 我们必须提交表单，然后显示覆盖。除此之外，我们发现不同版本的 IE 在这方面表现不同（这并不奇怪！）

我们最终想出了以下几点：

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class=""> <!--<![endif]-->
    <head>
        ....

和

  /* we need to do a minor hack here to ensure the animated gif continues to animate
   * for IE we need to submit the form BEFORE we load the overlay
   * for other browsers we need to submit the form shortly AFTER loading the overlay
   * Not ideal, but we'll use the css class applied to the html element to test
   * Perhaps in the future a more elegant solution might be to use something like Modernizr
   *
   * Note particular case for ie7, which requires a further step.
   * By copying the html of the overlay and reapplying it, the browser is forced to re-render the page
   */
  if (htmlElement.hasClass("ie6") || htmlElement.hasClass("ie8") || htmlElement.hasClass("ie9")) {
        $("form")[0].submit();
        $('#waitOverlay').overlay().load();
  } else if (htmlElement.hasClass("ie7")) {
        $("form")[0].submit();
        var waitOverlayHtml = $("#waitOverlay").html();
        $("#waitOverlay").html(waitOverlayHtml + "");
        $('#waitOverlay').overlay().load();
  } else {
        $('#waitOverlay').overlay().load();
        setTimeout(function() {
              $("form")[0].submit();
        }, 250);
  }

这自实施以来一直运作良好。然而，它依赖于我们在标记中使用条件注释……而且老旧的 IE10 已经放弃了对条件注释的支持！

当 IE10 运行此代码时，它会落入 else 块，就好像它是一个“不错的”浏览器一样。虽然站点和页面功能仍然有效 - 显示覆盖并提交表单 - 动画 gif 不动画！而我们的营销部门对此非常不满！！:(

我没有测试过，但我怀疑要让 IE10 正常工作，它需要运行第一个 if 分支；IE6、8 和 9 需要运行的相同代码。

我已经简要地研究过尝试将 ie10 类应用于 html 元素，但是我读过的所有内容（以及我们在原始代码中留下的评论'也许将来更优雅的解决方案可能是使用类似 Modernizr 的东西') 表明这不是这样做的方法。

因此，假设我们使用了诸如 Modernizr 之类的特征检测库，我们将更改我们的 javascript 如下：

  if ( browser has feature that makes IE6, IE8, IE9 and IE10 behave the way they do ) {
        $("form")[0].submit();
        $('#waitOverlay').overlay().load();
  } else if ( browser has feature that makes IE7 behave the way it does ) {
        $("form")[0].submit();
        var waitOverlayHtml = $("#waitOverlay").html();
        $("#waitOverlay").html(waitOverlayHtml + "");
        $('#waitOverlay').overlay().load();
  } else if ( browser has feature that makes standards compliant browsers behave the way they do ) {
        $('#waitOverlay').overlay().load();
        setTimeout(function() {
              $("form")[0].submit();
        }, 250);
  }

所以，我的问题是，有人知道我应该在上面的代码中检测到哪些特性吗？

4

0 回答 0