如何用bootbox.confirm替换原生confirm并实现页面跳转？

问题根源 #

原生confirm是同步阻塞的，函数会等待用户操作完成后再返回结果；而bootbox.confirm是异步非阻塞的——外层的saveChanges函数会直接执行到return false，回调函数里的return true根本不会影响外层函数的返回值，导致用户点击OK后也无法触发页面跳转或表单提交。

解决方案 #

核心思路是：先阻止默认的跳转/提交行为，再在bootbox.confirm的回调中根据用户选择手动触发目标操作。

场景1：绑定在链接点击事件 #

假设你的跳转逻辑是通过<a>标签触发的：

修改后的JavaScript代码：

var isSaveRequired = false;

function saveChanges(e) {
    // 阻止默认跳转行为
    if (e) e.preventDefault();
    
    if (isSaveRequired) {
        bootbox.confirm('<%= strings.getText("This is come from server side") %>', function(result) {
            if (result) {
                isSaveRequired = false;
                // 手动跳转到目标页面
                window.location.href = e.target.href;
            }
        });
        return false; 
    }
    return true; 
}

对应的HTML链接需要传递事件对象：

<a href="target-page.html" onclick="return saveChanges(event)">跳转至目标页</a>

场景2：绑定在表单提交事件 #

如果是表单提交触发的逻辑：

修改后的JavaScript代码：

var isSaveRequired = false;

function saveChanges(e) {
    // 阻止默认表单提交行为
    if (e) e.preventDefault();
    const targetForm = e.target;
    
    if (isSaveRequired) {
        bootbox.confirm('<%= strings.getText("This is come from server side") %>', function(result) {
            if (result) {
                isSaveRequired = false;
                // 手动提交表单
                targetForm.submit();
            }
        });
        return false; 
    }
    return true; 
}

对应的HTML表单：

<form onsubmit="return saveChanges(event)">
    <!-- 表单内容 -->
    <button type="submit">提交表单</button>
</form>

关键要点 #

• 必须通过事件对象e阻止默认的跳转/提交动作，避免页面直接执行默认行为；
• 异步回调中不要依赖return值控制流程，而是直接手动触发目标操作（跳转/提交）；
• 点击Cancel时无需额外操作，页面会保持当前状态。

内容的提问来源于stack exchange，提问作者Raptor