Question

我想知道是否有人可以提供帮助。我在一个包含表格的网站上工作。提交表单后，我们会显示一个叠加层，其中包含动画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);
  }

所以，我的问题是，是否有人知道我应该在上面的代码中检测的功能？

我可以用什么功能检测代码替换它？

0 个答案: