【问题标题】:Is there a JavaScript alert that doesn't pause the script?是否存在不暂停脚本的 JavaScript 警报?
【发布时间】:2008-11-19 22:59:13
【问题描述】:

我正在寻找类似 @​​987654321@ 的东西,但这不会“暂停”脚本。

我想显示一个警报并允许下一个命令(表单submit())继续执行。因此页面会在显示警报后发生变化,但不会等到用户单击“确定”。

有没有这样的事情,还是只是那些不可能的事情之一?

【问题讨论】:

    标签: javascript


    【解决方案1】:

    由于 setTimeout 是异步的,因此您可以在 setTimeout(非常短的超时)中发出警报:

    setTimeout("alert('hello world');", 1);
    

    或者要正确地做到这一点,你真的需要在你的 setTimeout 中使用一个方法而不是一个字符串:

    setTimeout(function() { alert('hello world'); }, 1);
    

    否则,您将面临 JavaScript 注入攻击。当您传递一个字符串时,它会通过 JavaScript eval 函数运行。

    【讨论】:

    • 不要将字符串传递给setTimeout,传递一个函数。 setTimeout(function() { alert('hello world'); } ) 更好——函数是 Javascript 中的一级对象
    • 是的,我知道我应该把它作为一个函数而不是一个要评估的字符串来完成。
    • 此解决方案不适用于 Chrome,即使在 setTimeout 中,警报也会暂停所有浏览器脚本。
    • setTimeout 不是异步的,它只是推迟了阻塞代码的同步执行。显示警报后,代码执行仍会被阻止,直到用户单击确定
    • 是的,John Weisz 所说的,它没有帮助,只要警报出现,页面就会在后台冻结(除了一些动画)
    【解决方案2】:

    如果已经在使用 JQuery,http://docs.jquery.com/UI/Dialog 使用简单,样式也很好。

    【讨论】:

    • 是的,以前用过这个,但我不想为应该简单的东西添加所有额外的代码。
    【解决方案3】:

    它可能不是您想要的,但使用 window.status = 'foo' 可能是合适的。

    我在我的一个用于 Intranet 的 webapps 中经常使用它。 setTimeout 方法也有效,但如果浏览器忙于密集任务,它可能会阻塞。但是状态栏更新总是立即的。

    这确实要求您的查看者具有 javascript 可以更改状态栏的设置 - 如果它是受信任的站点,则始终如此。

    【讨论】:

    • 好主意,但不是很明显。我试图阻止用户再次单击链接,因此他们最终不会多次提交表单(不会搞砸数据,但会因为他们不期望而弄乱用户的头部要提交的表单,但需要保存数据)。
    • window.status 应该做什么改变?
    • @maxpleaner 现在,nothing。当浏览器具有永久状态栏时,它会更有用。
    【解决方案4】:

    在这种情况下,使用 DHTML 和 JavaScript 来动态显示消息会更合适,可以是纯 HTML 元素,也可以是看起来更像对话框(但不是)的东西。这将为您提供所需的控制。所有主要的 JavaScript 框架(YUI、Dojo 等)都可以让您异步显示消息。

    【讨论】:

      【解决方案5】:

      不可靠。在新页面上使用 div。

      【讨论】:

      • 在页面之前需要它,以便用户知道他们的数据正在被提交。
      • 那么最好的方法是在后台将其提交给返回更新的网络服务。这样你就不需要在页面完成之前更改页面。 setTimeout("alert()") 经常被阻止:这取决于您的情况是否可能是一个问题。
      【解决方案6】:

      98% 的情况下,有一种方法可以移动您的消息脚本,以便它在其他所有内容执行后调用。对于另外 2%,我喜欢使用看起来像这样的浮动 div。然后,您可以更改您的 CSS 以匹配您的应用程序/网站的样式或使其看起来更像一个标准的弹出窗口。

      /*HTML*/
      <div class="floatingDiv" id="msgBox" style="visibility:hidden"></div>
      
      /*javaScript*/
      function openWindow(id){
      "use strict";
      document.getElementById(id).style.visibility = 'visible'; 
      }
      function closeWindow(id){
      "use strict";
      document.getElementById(id).style.visibility = 'hidden'; 
      }
      function myMsgBox(TITLE,MESSAGE) {
      "use strict";   
      document.getElementById("msgBox").innerHTML = "<a href=\"javascript:closeWindow('msgBox')\" style=\"float:right\"><img src=\"imgs/close.png\" onmouseover=\"src='imgs/closeOver.png'\" onmouseout=\"src='imgs/close.png'\"/ alt=\"[close]\"></a><h2 style=\"text-align:center; margin-top:0px;\">" + TITLE + "</h2><hr><p align=\"left\">" + MESSAGE + "</p>";
      openWindow("msgBox");
      }
      
      /*CSS*/
      .floatingDiv {
      position:absolute;  
      z-index:10000;
      left:33%;
      top:250px;
      width:33%;
      background-color:#FFF;
      min-width:217px;
      text-align: left;
      border-radius: 10px 10px;
      border:solid;
      border-width:1px;
      border-color:#000;
      vertical-align:top;
      padding:10px;
      
      background-image: -ms-linear-gradient(top, #CCCCCC 0%, #FFFFFF 25px, #FFFFFF 100%);
      background-image: -moz-linear-gradient(top, #CCCCCC 0%, #FFFFFF 25px, #FFFFFF 100%);
      background-image: -o-linear-gradient(top, #CCCCCC 0%, #FFFFFF 25px, #FFFFFF 100%);
      background-image: -webkit-linear-gradient(top, #CCCCCC 0%, #FFFFFF 25px, #FFFFFF 100%);
      background-image: linear-gradient(to bottom, #CCCCCC 0%, #FFFFFF 25px, #FFFFFF 100%);
      
      box-shadow:3px 3px 5px #003; 
      filter: progid:DXImageTransform.Microsoft.Shadow(color='#000033', Direction=145, Strength=3);
      }
      

      【讨论】:

        猜你喜欢
        • 2013-01-07
        • 1970-01-01
        • 2015-02-12
        • 2013-10-04
        • 2015-07-12
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多