【问题标题】:How to return true or false values using JavaScript or jQuery after click on confirm or cancel button from confirm box?在确认框中单击确认或取消按钮后,如何使用 JavaScript 或 jQuery 返回真值或假值?
【发布时间】:2018-07-30 09:38:09
【问题描述】:

我目前正在处理一个项目,如果用户尝试刷新当前页面,他们将收到带有警报Don't refresh page or else you will lose data 的确认框,因此如果他们取消,那么他将留在同一页面上,但我的问题是当他们点击是时即,当他点击重新加载时重新加载,另一个警报应该得到you clicked reload now page will reload and data will loss,所以如何做到这一点,因为当他点击重新加载按钮时我没有得到任何东西。

下面我已经写好了脚本。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $(window).on('beforeunload', function(){ 
        return prompt("are you sure want to refresh this page !");

        if(true){
            alert('You will lose data');
        }
        else{
            alert("Ok continue your work");
       }
    });
</script>

【问题讨论】:

  • “你会丢失数据”...应该是“丢失”。 “松散”意味着别的东西。让您的应用看起来更专业的一件小事。和!在“你确定要刷新这个页面吗!”应该是一个?,并且在它之前不应该有空格。 “are”中的“a”也应该大写(“Are”),因为它是句子的开头。也许如果您不是以英语为母语的人,您应该请人检查您的语法和拼写。您问题的措辞也缺乏足够的标点符号,难以理解。
  • 你正在做return prompt()return 语句之后的任何代码都不会被执行
  • @PatrickEvans 好的,请告诉我如何解决问题,即使我删除 return 仍然没有得到任何东西。

标签: javascript jquery


【解决方案1】:

return 语句退出函数,因此 return 语句之后的所有内容都不会执行

我认为您不需要prompt 框,而是需要confirm 框(请参阅here)。

  • prompt 框仅用于用户获取某些内容
  • confirm 框用于询问用户是否确认某事

var rep = confirm("are you sure want to refresh this page !");
console.log(rep);

if(rep){
  alert('You will lose data');
}
else{
  alert("Ok continue your work");
}

【讨论】:

  • 我希望当用户尝试为此目的刷新我在脚本中提到的 onbeforeload 时这应该可以工作
  • 这会,只要把我给你的代码放在你的$(window).on('beforeunload', function(){
  • 刚才我试过了,你提到的还是没有任何确认框或提示直接刷新页面。
  • 浏览器可能会在 'beforeunload' 事件中阻止警报、确认和提示,以避免烦人的弹出窗口。
  • 这就是我的想法,但如果没有 SO 提供的进一步信息,我只能提供这个答案
【解决方案2】:

我建议您在使用 onBeforeLoad 事件时不要使用 Jquery。它会导致不需要的行为。 Vanilla JS 会处理得更好。

示例:

window.onbeforeunload = function beforeExit();

function beforeExit(){
return confirm("Are you sure you want to exit?");
}

使用此方法,如果用户尝试刷新页面,您的函数将执行。

【讨论】:

  • 它不工作你能把工作代码发给我吗。
  • 没有得到预期的输出我的意思是没有得到警报请检查您的系统是否有效,告诉我我必须做哪些更改
  • @Anonymous,试试console.log()。警报可能会被阻止。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-07-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多