如何在Shiny应用中通过服务器端触发bslib卡片全屏展开？

要在服务器端触发bslib卡片的全屏展开，我们可以通过自定义JavaScript消息模拟点击卡片自带的全屏按钮。以下是完整实现代码：

library(shiny)
library(bslib)

ui <- bslib::page_fluid(
  # 引入自定义JS脚本，监听服务器端触发指令
  tags$script(HTML("
    Shiny.addCustomMessageHandler('trigger_fullscreen', function(cardId) {
      // 定位目标卡片的全屏按钮并触发点击
      const card = document.getElementById(cardId);
      if (card) {
        const fullscreenBtn = card.querySelector('.card-fullscreen-button');
        if (fullscreenBtn) {
          fullscreenBtn.click();
        }
      }
    });
  ")),
  actionButton("go", "触发全屏"),
  # 给卡片添加唯一ID，方便前端精准定位
  bslib::card(
    id = "target_card",
    h1("Hello"),
    full_screen = TRUE
  )
)

server <- function(input, output, session){
  observe({
    # 向前端发送消息，触发指定卡片的全屏操作
    session$sendCustomMessage(
      type = "trigger_fullscreen",
      message = "target_card"
    )
  }) |> 
    bindEvent(input$go)
}

shinyApp(ui, server)

关键说明： #

• 给目标卡片添加id属性，确保前端能精准定位到该卡片
• 通过Shiny.addCustomMessageHandler注册前端消息监听器，接收服务器端的触发指令
• 服务器端调用session$sendCustomMessage发送消息，触发前端脚本模拟点击全屏按钮

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