Question

希望你们都做得很好。

情境：

用户已打开表单以填写。现在，他点击指向其他页面的链接或点击刷新或尝试通过单击相应选项卡上的（x）来关闭页面。

问题：

现在，我需要询问用户是否故意试图离开表单页面或者这是一个错误（你确定要离开???? - 是 - 确认|否 - 取消）

我已经尝试了onbeforeunload，但它仍然没有帮助。

到目前为止，这是我可以发展的。

$(window).on('beforeunload', function(e){
    formContainer =  $('#resume_form_container');
    itemContainer = $('.item_container');
    e.preventDefault();

    //  discard drafts on page refresh against any opened form
    formContentConatinerLength =  $(formContainer).html().trim().length;
    itemContainerLength = $(itemContainer.length);

    //  there is a model opened for processing
    //  against resume basics | any section instance
    if(formContentConatinerLength > 0 || itemContainerLength > 0) {

        bootbox.confirm({
            message: 'Are sure??',
            size: 'small',
            backdrop: true,
            buttons: {
                confirm: {
                    label: 'ok',
                    className: 'btn-primary'
                },
                cancel: {
                    label: 'Cancel',
                    className: 'btn-default'
                }
            },
            callback: function (result) {
                if(result)  //  case: Remove All Draft Attachments Confirmed
                {
                    $('#close_model').click();
                    return true;
                }
                else    //  case: cancel all draft attachments removal
                {
                    return false;
                    //  console.log('This was logged in the callback: ' + result);
                }
            }
        });
    }
});

作为输出： 我只是看到bootbox提示只是表示10毫秒（它立即进入）但没有进一步。没有语句被执行。我在控制台和页面重新加载中没有任何内容。如果我点击取消，我的页面仍会重新加载。

注意： 如果用户说是肯定，我会做一些活动来删除他对我的表单做的所有痕迹。另外，我想只在表单打开时询问最终用户确认

感谢任何帮助。

保持幸福。

Answer 1

大多数浏览器开发人员都增加了安全措施，可以防止恶意编码人员使用他们自己的弹出窗口，因为这可能会阻止用户离开您的网站。

当使用“onbeforeUnload”时，你的函数应该返回一个出现在对话框窗口中的字符串，即 -

$(window).on('beforeunload', function(e){
    formContentConatinerLength =  $(formContainer).html().trim().length;
    itemContainerLength = $(itemContainer.length);

    //  there is a model opened for processing
    //  against resume basics | any section instance
    if(formContentConatinerLength > 0 || itemContainerLength > 0) {
        return "Are you sure you want to leave?";
});

有关详细信息，请查看Mozilla Developer Network。

为了处理确认他们确实希望离开页面的用户，您可以使用在卸载页面后发生的“onunload”事件（因此在“beforeunload”之后）。像 -

这样的东西

$(window).on('unload', function(e){
    //remove all the traces of what the user did with the form
});

Answer 2

当用户尝试离开时，您可以使用addEventListener事件。但是，如果您使用DIV作为弹出窗口，浏览器将在用户有机会阅读之前离开。

要将它们保留在那里，您必须使用警报/提示/确认对话框。（据我所知）

示例代码：

$(window).addEventListener('beforeunload', function(e){
formContainer =  $('#resume_form_container');
itemContainer = $('.item_container');
e.preventDefault();

//  discard drafts on page refresh against any opened form
formContentConatinerLength =  $(formContainer).html().trim().length;
itemContainerLength = $(itemContainer.length);

//  there is a model opened for processing
//  against resume basics | any section instance
if(formContentConatinerLength > 0 || itemContainerLength > 0) {

    bootbox.confirm({
        message: 'Are sure??',
        size: 'small',
        backdrop: true,
        buttons: {
            confirm: {
                label: 'ok',
                className: 'btn-primary'
            },
            cancel: {
                label: 'Cancel',
                className: 'btn-default'
            }
        },
        callback: function (result) {
            if(result)  //  case: Remove All Draft Attachments Confirmed
            {
                $('#close_model').click();
                return true;
            }
            else    //  case: cancel all draft attachments removal
            {
                return false;
                //  console.log('This was logged in the callback: ' + result);
            }
        }
    });
}
});

在表单打开时确认用户页面刷新

2 个答案: