Início / coding / Perguntas / 79549532
Accepted
Grasshopper_NZ
Asked: 2025-04-02 10:16:16 +0800 CST

Como um botão de entrada Shiny pode controlar um botão de exibição em um site Quarto aninhado dentro de um iframe?

  • 772

Estou criando um aplicativo Shiny que tem uma aba para documentação e pretendo usar tags$iframeum site Quarto renderizado para ele.

No Quarto, é possível definir um switch para display . Isso também mostrará um botão switch para controlar o tema do site.

O aplicativo de exemplo é mostrado abaixo:

insira a descrição da imagem aqui

Embora ambos suportem a alternância do modo claro para o escuro, os usuários precisam clicar em diferentes interruptores duas vezes, o que não é o ideal para a melhor experiência:

Apenas a entrada Brilhante mudou para escura: insira a descrição da imagem aqui

Tanto a entrada Shiny quanto a entrada Quarto mudaram para escuro: insira a descrição da imagem aqui

Minha pergunta é: É possível usar um botão de entrada do Shiny para controlar o tema no aplicativo Shiny e o tema no site do Quarto?

O código do aplicativo Shiny de exemplo é:

library(shiny)
library(bslib)
library(htmltools)

ui <- page_fillable(

    input_dark_mode(id = "shiny_control", mode = "light"),

    tags$iframe(
      src = "_site/index.html",

      style = "height:86vh"
    )
)

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

}

shinyApp(ui, server)

E a estrutura completa do aplicativo está disponível no github :

├── app.R                                       <- Shiny app
├── control_quarto_theme_from_Shiny.Rproj
└── www               
    └── _site                                   <- Rendered Quarto Website files
        ├── about.html
        ├── index.html
        ├── search.json
        ├── site_libs
        │   ├── bootstrap
        │   │   ├── bootstrap-dark.min.css
        │   │   ├── bootstrap-icons.css
        │   │   ├── bootstrap-icons.woff
        │   │   ├── bootstrap.min.css
        │   │   └── bootstrap.min.js
        │   ├── clipboard
        │   │   └── clipboard.min.js
        │   ├── quarto-html
        │   │   ├── anchor.min.js
        │   │   ├── popper.min.js
        │   │   ├── quarto-syntax-highlighting-dark.css
        │   │   ├── quarto-syntax-highlighting.css
        │   │   ├── quarto.js
        │   │   ├── tippy.css
        │   │   └── tippy.umd.min.js
        │   ├── quarto-nav
        │   │   ├── headroom.min.js
        │   │   └── quarto-nav.js
        │   └── quarto-search
        │       ├── autocomplete.umd.js
        │       ├── fuse.min.js
        │       └── quarto-search.js
        └── styles.css

1 respostas

  1. Best Answer

    Você pode configurar um manipulador de eventos de clique que aciona um clique de botão no Quarto (ou Shiny), se o controle Shiny (ou Quarto) foi clicado:

    library(shiny)
library(bslib)
library(htmltools)

ui <- page_fillable(
  tags$head(
    tags$script('
    $(document).on("shiny:connected", function () {
      
      var iframe = document.getElementById("QuartoWebsite");
      var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
      var ShinyDarkMode = document.getElementById("shiny_control").shadowRoot.querySelector("button");
      var QuartoDarkMode = innerDoc.querySelector(".quarto-color-scheme-toggle");
      
      QuartoDarkMode.addEventListener("click",
          function(event) {
            if (!event.isTrusted) {
              return; // to avoid an infinite loop because of the other event listener, only trigger if the user clicked
            }
            ShinyDarkMode.click();
        });
      
      ShinyDarkMode.addEventListener("click",
          function(event) {
            if (!event.isTrusted) {
              return; // to avoid an infinite loop because of the other event listener, only trigger if the user clicked
            }
            QuartoDarkMode.click();
          }
      );
                
   });')),
  
  input_dark_mode(id = "shiny_control", mode = "light"),
  
  tags$iframe(
    id = "QuartoWebsite",
    src = "_site/about.html",
    style = "height:86vh"
  )
)

shinyApp(ui, \(...){})

    insira a descrição da imagem aqui

    • 3

relate perguntas