如何防止用户意外退出Shiny会话？Shiny新手技术求助

嗨！作为Shiny新手，这个防止误操作丢失输入的需求其实很常见，而且不需要复杂的Web开发知识就能实现——核心是利用浏览器的beforeunload事件，结合Shiny的JS嵌入能力来搞定。

基础实现：直接嵌入JS监听页面卸载事件 #

你不需要额外安装包，只需要在Shiny的UI部分添加一段自定义JavaScript代码，监听浏览器的beforeunload事件（这个事件会在用户关闭标签页、刷新页面或导航离开时触发）。

下面是可以直接套用的示例代码，你可以根据自己的输入控件调整判断逻辑：

library(shiny)

ui <- fluidPage(
  # 这里放你的应用输入控件，比如逐步收集的表单项
  textInput("user_name", "请输入姓名"),
  textInput("user_email", "请输入邮箱"),
  numericInput("user_age", "请输入年龄", value = NULL),
  
  # 关键：添加自定义JS代码
  tags$script(HTML("
    // 监听页面卸载前的事件
    window.addEventListener('beforeunload', function(event) {
      // 检查用户是否有未提交的输入（根据你的控件ID调整）
      const hasInput = document.getElementById('user_name').value !== '' ||
                       document.getElementById('user_email').value !== '' ||
                       (document.getElementById('user_age').value !== null && document.getElementById('user_age').value !== '');
      
      if (hasInput) {
        // 阻止默认的卸载行为，触发确认弹窗
        event.preventDefault();
        // 兼容不同浏览器的设置，有些需要returnValue才能显示弹窗
        event.returnValue = '';
        return '';
      }
    });
  "))
)

server <- function(input, output, session) {
  # 这里放你的应用逻辑，比如处理输入的代码
}

shinyApp(ui, server)

这段代码的逻辑很简单：

• 通过tags$script(HTML(...))把JS代码嵌入到Shiny页面中
• 当用户尝试离开页面时，JS会检查你指定的输入控件是否有内容
• 如果有内容，就触发浏览器自带的确认弹窗，询问用户是否确定离开——这个弹窗是浏览器原生的（出于安全限制无法自定义文字），但已经能有效防止误操作了

进阶版：跟踪「未保存更改」状态 #

如果你的应用有类似「保存」的操作（比如模拟提交），你可能希望只有当用户有未保存的修改时才弹出提示，这时候可以结合Shiny的后端逻辑动态控制：

library(shiny)

ui <- fluidPage(
  textInput("user_name", "请输入姓名"),
  textInput("user_email", "请输入邮箱"),
  actionButton("save_btn", "保存输入"),
  
  tags$script(HTML("
    // 前端标记是否有未保存更改
    let hasUnsavedChanges = false;
    
    // 接收来自Shiny后端的状态更新
    Shiny.addCustomMessageHandler('updateUnsavedStatus', function(msg) {
      hasUnsavedChanges = msg.status;
    });
    
    window.addEventListener('beforeunload', function(event) {
      if (hasUnsavedChanges) {
        event.preventDefault();
        event.returnValue = '';
        return '';
      }
    });
  "))
)

server <- function(input, output, session) {
  # 后端跟踪未保存状态
  unsaved_changes <- reactiveVal(FALSE)
  
  # 当输入变化时，标记为未保存
  observe({
    input$user_name
    input$user_email
    unsaved_changes(TRUE)
  })
  
  # 点击保存按钮后，标记为已保存
  observeEvent(input$save_btn, {
    unsaved_changes(FALSE)
    showNotification("输入已保存！", type = "success")
  })
  
  # 把状态发送给前端JS
  observe({
    session$sendCustomMessage("updateUnsavedStatus", list(status = unsaved_changes()))
  })
}

shinyApp(ui, server)

这个版本的优势是：只有当用户修改了输入但还没点击保存时，才会在离开时弹出提示，体验更友好。

几个小提醒 #

• 浏览器对beforeunload事件有严格限制，无法自定义弹窗的文字和按钮样式，只能使用浏览器原生的提示框——这是为了防止恶意网站滥用该功能
• 对于你这种逐步收集输入的场景，第一个基础版本就足够用了，先跑通这个，再根据需求调整
• 如果你有更多输入控件，只需要在JS的hasInput判断里添加对应的控件ID即可

内容的提问来源于stack exchange，提问作者Erin Sprünken