当前位置: 首页 > 面试题库 >

JavaScript如何显示“您确定要离开此页面吗?” 何时提交更改?

夏何平
2023-03-14
问题内容

在stackoverflow中,如果您开始进行更改,然后尝试离开该页面,则会显示一个javascript确认按钮并询问:“确定要离开该页面吗?” bleeblah bloo …

之前有人实施过此功能,如何跟踪所做的更改?我相信自己可以做到,我正在尝试向您的专家学习良好做法。

我尝试了以下操作,但仍然无法正常工作:

<html>
<body>
    <p>Close the page to trigger the onunload event.</p>
    <script type="text/javascript">
        var changes = false;        
        window.onbeforeunload = function() {
            if (changes)
            {
                var message = "Are you sure you want to navigate away from this page?\n\nYou have started writing or editing a post.\n\nPress OK to continue or Cancel to stay on the current page.";
                if (confirm(message)) return true;
                else return false;
            }
        }
    </script>

    <input type='text' onchange='changes=true;'> </input>
</body>
</html>

有人可以举一个例子吗?


问题答案:

更新

现在,现代浏览器认为显示自定义消息是一种安全隐患,因此已将其从所有浏览器中删除。现在,浏览器仅显示常规消息。由于我们不再需要担心设置消息的问题,因此它很简单:

// Enable navigation prompt
window.onbeforeunload = function() {
    return true;
};
// Remove navigation prompt
window.onbeforeunload = null;

阅读以下内容以获取旧版浏览器支持。

更新

原始答案适用于IE6-8和FX1-3.5(这是我们在2009年编写时所针对的目标),但是现在已经过时了,在大多数当前的浏览器中都无法使用-我已经离开了下面以供参考。

window.onbeforeunload所有浏览器都没有一致的处理。它应该是函数引用,而不是字符串(如原始答案所述),但是它将在较旧的浏览器中工作,因为对大多数浏览器的检查似乎是是否已分配了任何内容onbeforeunload(包括返回的函数null)。

您设置window.onbeforeunload为函数引用,但是在较旧的浏览器中,您必须设置returnValue事件的,而不仅仅是返回字符串:

var confirmOnPageExit = function (e) 
{
    // If we haven't been passed the event get the window.event
    e = e || window.event;

    var message = 'Any text will block the navigation and display a prompt';

    // For IE6-8 and Firefox prior to version 4
    if (e) 
    {
        e.returnValue = message;
    }

    // For Chrome, Safari, IE8+ and Opera 12+
    return message;
};

confirmOnPageExit如果您希望用户继续操作而不收到消息,则无法进行检查并返回null。您仍然需要删除事件以可靠地打开和关闭该事件:

// Turn it on - assign the function that returns the string
window.onbeforeunload = confirmOnPageExit;

// Turn it off - remove the function entirely
window.onbeforeunload = null;

原始答案

打开它:

window.onbeforeunload = "Are you sure you want to leave?";

要将其关闭:

window.onbeforeunload = null;

请记住,这不是正常事件-您无法以标准方式绑定到该事件。

要检查值?这取决于您的验证框架。

在jQuery中,可能类似于(非常基本的示例):

$('input').change(function() {
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
});


 类似资料:
  • 问题内容: 在stackoverflow中,如果您开始进行更改,然后尝试离开该页面,则会显示一个javascript确认按钮并询问:“确定要离开该页面吗?” blee blah bloo … 之前有人实施过此功能,如何跟踪所做的更改?我相信自己可以做到,我正在尝试向您的专家学习良好做法。 我尝试了以下操作,但仍然无法正常工作: 有人可以举一个例子吗? 问题答案: 更新(2017) 现在,现代浏览器

  • 本文向大家介绍如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”,包括了如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”的使用技巧和注意事项,需要的朋友参考一下 一、避免弹出提示框 在网上搜了很多,答案大都是设置window.onbeforeunload=null ,但是试用之后无效。 这个问题放了两天之后返回来再次想,终于找到了答案,在此和大家分享一下: 解除jquer

  • 问题内容: 我试图显示文件的两次提交之间的git diff。基本上,我是按照https://github.com/centic9/jgit- cookbook/blob/master/src/main/java/org/dstadler/jgit/porcelain/ShowChangedFilesBetweenCommits.java中的说明进行操作的 您可以在https://github.co

  • 问题内容: 我是angularjs新蜜蜂。我正在尝试编写一个验证,当用户尝试关闭浏览器窗口时会发出警告。 我的页面v1和v2上有2个链接。单击链接时,它指向特定页面。这是重定向到v1和v2的代码 当用户单击v1时,我想弹出一条消息,“如果他希望继续,他将从v1离开”,而单击v2时也是如此。任何有关如何实现这一目标的指针将不胜感激。 我在这里得到了答案,但是在每个时间间隔后都会弹出该消息。 更新的代

  • 我有一个Python Selenium脚本:a)在主窗口上执行任务,B)启动第二个窗口C)切换到第二个窗口D)在第二个窗口上执行任务E)关闭第二个窗口F)切换回第一个窗口,继续执行任务。 从经验上看,变通办法应该是:*以不触发Chrome行为的方式返回第一个窗口*当webdriver实例启动时,通过调整Chrome的选项来取消此Chrome功能 ...但我不知道怎么做。

  • 问题内容: 我正在使用Three.js创建3D多人游戏,玩家可以在其中加入各种现有游戏。单击“播放”后,渲染器将附加到页面和全屏。这很好用,但是问题是,当我退出全屏显示时,它仍然保持附加状态。我想删除它,但是我不知道什么时候! 因此,基本上,我正在寻找一个事件,该事件说“此元素退出全屏显示”。 这是将渲染器附加到页面的方法: 如果我如何全屏显示: 此外,是否有办法阻止有人将鼠标指向页面顶部时出现该