JavaScript 重定向防止 IE 上的 CSS 覆盖答案

【问题标题】：JavaScript Redirect Prevents CSS Overlay on IEJavaScript 重定向防止 IE 上的 CSS 覆盖
【发布时间】：2014-08-29 05:38:56
【问题描述】：

我正在构建一个 PayPal Express Checkout 页面；不幸的是，PayPal 需要很长时间才能加载重定向，以至于我不得不设计一个页面叠加层来显示那几秒钟。该序列适用于 FF 和 Chrome，但可惜 IE 卡住了。

仅供参考：当我首先调用 SetOverlay() 时，重定向永远不会发生——在任何浏览器上。奇怪的。所以很自然地，我在设置叠加层之前将其切换为重定向。

我在 IE 上得到的只是禁用按钮，仅此而已。如果我注释掉重定向，叠加层会按预期显示。

有没有人有任何想法或知道如何让它在 IE 上运行？谢谢。

这是服务器端代码：

sOverlay = File.ReadAllText(Server.MapPath("~/Scripts/Overlay.js"))

Me.Page.Header.Controls.Add(New LiteralControl("<script src=""Scripts/jquery-2.1.1.js""></script>"))
Me.Page.ClientScript.RegisterClientScriptBlock(Me.GetType, "Overlay", sOverlay, True)
Me.Page.ClientScript.RegisterStartupScript(Me.GetType, "Redirect", "window.location.replace('{0}');".ToFormat(.GetRedirectUrl(sToken)), True)
Me.Page.ClientScript.RegisterStartupScript(Me.GetType, "SetOverlay", "SetOverlay();", True)

然后是客户端代码：

$(function SetOverlay() {
  var docHeight = $(document).height();

  $("body").append("<div id='overlay'></div>");
  $("body").append("<div class='heavy blue' id='box'>Transferring to PayPal...</div>");

  $("#overlay")
    .height(docHeight)
    .css({
      'background-color': 'black',
      'position': 'absolute',
      'opacity': 0.3,
      'z-index': 4999,
      'cursor': 'wait',
      'width': '100%',
      'left': 0,
      'top': 0
    });

  $("#box")
    .css({
      'background-color': 'white',
      'text-align': 'center',
      'margin-left': '-150px',
      'position': 'absolute',
      'padding': '20px',
      'z-index': 5000,
      'border': 'solid 1px #4088b8',
      'cursor': 'wait',
      'width': '300px',
      'left': '50%',
      'top': '40%',
      'box-shadow': '0 0 4px 2px gray'
    })
});

【问题讨论】：

可能与事件队列阻塞有关。您能否尝试在超时中包装您的重定向：setTimeout(function() {window.location.replace('{0}');}, 50)
有趣的事情，那个。凭直觉，我正要试一试。但后来我想到了答案：跳过 JQuery 并改用 POCSS。详情见我的回答。

标签： javascript jquery .net css

【解决方案1】：

好的，我找到了诀窍。我最终完全跳过了 JQuery 并使用了纯 CSS 解决方案。

效果很好。（想留下这个问题，以防其他人遇到同样的问题。）

这是代码。

.ASCX:

<asp:Panel ID="pnlOverlay" runat="server" Visible="False" CssClass="Overlay"></asp:Panel>
<asp:Panel ID="pnlCaption" runat="server" Visible="False" CssClass="heavy blue Caption">Transferring to PayPal...</asp:Panel>

代码背后：

Me.Page.ClientScript.RegisterStartupScript(Me.GetType, "Redirect", "window.location.replace('{0}');".ToFormat(.GetRedirectUrl(sToken)), True)
Me.Page.Header.Controls.Add(New Controls.Styler("Overlay"))

pnlOverlay.Visible = True
pnlCaption.Visible = True

CSS：

div.Overlay {
  background-color: black;
  position: absolute;
  opacity: 0.3;
  z-index: 4999;
  cursor: wait;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

div.Caption {
  background-color: white;
  text-align: center;
  margin-left: -150px;
  position: absolute;
  padding: 20px;
  z-index: 5000;
  border: solid 1px #4088b8;
  cursor: wait;
  width: 300px;
  left: 50%;
  top: 40%;
  box-shadow: 0 0 4px 2px gray;
}

样式器类：

Public Class Styler
  Inherits LiteralControl

  Public Sub New(FileName As String)
    Dim _
      sFileName,
      sStyles As String

    sFileName = Path.GetFileNameWithoutExtension(FileName)
    sStyles = File.ReadAllText(HttpContext.Current.Server.MapPath("~/Styles/{0}.css".ToFormat(sFileName)))

    Me.Text = "{0}<style type=""text/css"">{0}{1}</style>{0}".ToFormat(vbCrLf, sStyles)
  End Sub
End Class

【讨论】：