刷新任何选项卡时，页面会自动导航到第一个选项卡

Question

在下面的应用程序中，只要用户既不在 tab2 也不在 tab3 中并单击刷新，页面就会转到 tab1。我们能否避免这种情况并确保页面保持在相应的标签后刷新：slight_smile：是否有可能实现请指导我。

library(shiny)
ui <- fluidPage(
  tabsetPanel(
    id="inTabset",
    tabPanel("Tab 1",actionButton("switch_tab", "Go to the third tab")
    ),
    tabPanel("Tab 2", "there!"),
    tabPanel("Tab 3", "there!"))

)

server <- function(input, output, session) {

  observeEvent(input$switch_tab, {
    updateTabsetPanel(session, "inTabset",selected = "Tab 3")
  })

}
shinyApp(ui = ui, server = server)

Answer 1

您需要保持状态，Shiny 对此有 a bookmark system，但在您的情况下，您可能希望拥有一个更不可见的机制。

将Cookie.js JavaScript library 添加到您的 Shiny 应用中，如下所示：

 tags$head(tags$script(src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js")),
        tags$head(tags$script(src="app.js")),
        tabsetPanel(
            id="inTabset",
            tabPanel("Tab 1",actionButton("switch_tab", "Go to the third tab")),
            tabPanel("Tab 2", "there!"),
            tabPanel("Tab 3", "there!")),

并在 Shiny 根目录的 www-directory 中创建一个 app.js 文件，内容如下：

$(document).ready(function(){
   $("a[data-toggle='tab']").click(function(){
     const tabId = $(this).data("value");
     Cookies.set('tabId', tabId);
   })
   const cookieTabId = Cookies.get("tabId");
   if(cookieTabId){
     console.log(`Restoring tab '${cookieTabId}'`); 
     $(`a[data-value='${cookieTabId}']`).tab('show');
   }
 })

上述JS中最难的部分是jQuery选择器和show()方法from Bootstrap。

您还可以将选定的选项卡值传输到服务器并将每个用户的会话值保存在数据存储中。它将在用户浏览器之外创建状态持久性。

The solution can be downloaded from here.