如何将我的JS脚本嵌入Shiny应用程序中，以便识别所有链接？

huangapple
go评论99阅读模式
英文:

How do I embed my JS script in a shiny app so that all links are recognized?

问题

我想查询所有通过renderUI()集成到HTML中的外部脚本链接。但是我得到一个空的节点列表[]。我应该在哪个地方包含脚本？

我尝试了以下内容：

R Shiny脚本

  1. library(shiny)
  3. ui = navbarPage(
  4.   title = "Test",  
  5.   id = "test", 
  6.   selected = "One", 
  7.   footer = tagList(
  8.     tags$script(src = "custom.js")),
  9.   
  10.   tabPanel(title = "One",
  11.     
  12.            
  13.     div("some links", style = "margin-top: 6rem;"),
  14.     div(uiOutput(outputId = "test_ui")),
  15.     
  16.     
  17.   )
  18.   
  19. )
  21. server = function(input, output, session){
  22.   
  23.   
  24.   output$test_ui  = renderUI({
  25.     
  26.     
  27.     
  28.     tagList(
  29.       div(class = "link-section",
  30.           tags$a("link_one"),
  31.           tags$a("link_two"),
  32.           tags$a("link_three"))
  33.     )
  34.     
  35.   })
  36.   
  37.   
  38.   
  39. }
  40. shinyApp(ui = ui, server = server, options = list(port = 3838, host = '0.0.0.0'))

JS脚本（位于应用程序目录的www文件夹中）

  1. let links = document.querySelectorAll("a.link-section");
  2. console.log(links);

在这里，我已经去掉了HTML中的HTML转义字符，并将脚本和HTML代码的一部分翻译成了中文。

英文:

I would like to query all links with an external script that I integrate into the HTML via a renderUI(). However i get a empty Nodelist []. At which point do i have to include the script?

I tried the following:

R Shiny Script

  1. library(shiny)
  3. ui = navbarPage(
  4.   title = "Test",  
  5.   id = "test", 
  6.   selected = "One", 
  7.   footer = tagList(
  8.     tags$script(src = "custom.js")),
  9.   
  10.   tabPanel(title = "One",
  11.     
  12.            
  13.     div("some links", style = "margin-top: 6rem;"),
  14.     div(uiOutput(outputId = "test_ui")),
  15.     
  16.     
  17.   )
  18.   
  19. )
  21. server = function(input, output, session){
  22.   
  23.   
  24.   output$test_ui  = renderUI({
  25.     
  26.     
  27.     
  28.     tagList(
  29.       div(class = "link-section",
  30.           tags$a("link_one"),
  31.           tags$a("link_two"),
  32.           tags$a("link_three"))
  33.     )
  34.     
  35.   })
  36.   
  37.   
  38.   
  39.   
  40. }
  41. shinyApp(ui = ui, server = server, options = list(port = 3838, host = '0.0.0.0'))

JS Script (located in www folder of app directory)

  1. let links = document.querySelectorAll("a.link-section");
  2. console.log(links);

答案1

得分: 0

Shiny with shinyjs

js函数的函数名前缀为 shinyjs.，以便被 shinyjs::extendShinyjs() 的 functions 参数识别，并在R中通过 js$MySelection() 调用。

我使用了 shiny::onFlushed(function() { js$MySelection() })

> "onFlushed 注册一个在 Shiny 刷新反应式系统后调用的函数。".

custom.js:

  1. shinyjs.MySelection=function() {
  2.   let links = document.querySelectorAll(".link-section a");
  3.   console.log(links);
  4. }

app.R:

  1. library(shiny)
  2. library(shinyjs)
  4. ui = fluidPage(
  5.   div(
  6.     useShinyjs(),
  7.     shinyjs::extendShinyjs(
  8.       script = "custom.js", # without www
  9.       functions = c("MySelection")
  10.     ),
  11.     navbarPage(
  12.       title = "Test",  
  13.       id = "test", 
  14.       selected = "One", 
  15.       
  16.       tabPanel(title = "One",
  17.                
  18.                div("some links", style = "margin-top: 6rem;"),
  19.                div(uiOutput(outputId = "test_ui"))
  20.                
  21.       )
  22.       
  23.     )
  24.     
  25.   )
  26. )
  28. server = function(input, output, session){
  29.   
  30.   output$test_ui  = renderUI({
  31.     tagList(
  32.       div(class = "link-section",
  33.           tags$a("link_one"),
  34.           tags$a("link_two"),
  35.           tags$a("link_three")
  36.       ),
  37.     )
  38.     
  39.   })
  41.   # in case of more delayed events or interactions : 
  42.   # observeEvent(input$hiddenInput,{
  43.   #   js$MySelection()  
  44.   # })
  45.   
  46.   shiny::onFlushed(
  47.     function() {
  48.       js$MySelection()  
  49.     }
  50.   )
  51.   
  52.   
  53. }
  55. shinyApp(ui = ui, server = server)

纯Shiny无shinyjs

custom.js:

  1. $(document ).on("shiny:sessioninitialized", function(event) {
  2.   MySelection=function() {
  3.     let links = document.querySelectorAll(".link-section a");
  4.     console.log(links);
  5.   }
  6. })

app.R:

  1. library(shiny)
  2. ui = fluidPage(
  3.   div(
  5.     tags$head(tags$script(type="text/javascript",src="custom.js")),
  6.     navbarPage(
  7.       title = "Test",  
  8.       id = "test", 
  9.       selected = "One", 
  10.       
  11.       tabPanel(title = "One",
  12.                
  13.                div("some links", style = "margin-top: 6rem;"),
  14.                div(uiOutput(outputId = "test_ui"))
  15.                
  16.       )
  17.       
  18.     )
  19.     
  20.   )
  21. )
  23. server = function(input, output, session){
  24.   
  25.   output$test_ui  = renderUI({
  26.     tagList(
  27.       div(class = "link-section",
  28.           tags$a("link_one"),
  29.           tags$a("link_two"),
  30.           tags$a("link_three")
  31.       ),
  32.       tags$script(type="text/javascript", "MySelection()")
  33.     )
  34.     
  35.   })
  37.   
  38. }
  40. shinyApp(ui = ui, server = server)
英文:

Shiny with shinyjs

The function name of js function is prefixed by shinyjs. to be known by functions parameter of shinyjs::extendShinyjs() and called in R by js$MySelection().

I've used shiny::onFlushed(function() { js$MySelection() })

> "onFlushed registers a function that will be called after Shiny flushes the reactive system.".

custom.js:

  1. shinyjs.MySelection=function() {
  2.   let links = document.querySelectorAll(".link-section a");
  3.   console.log(links);
  4. }

app.R:

  1. library(shiny)
  2. library(shinyjs)
  5. ui =fluidPage(
  6.   div(
  7.     useShinyjs(),
  8.     shinyjs::extendShinyjs(
  9.       script = "custom.js", # without www
  10.       functions = c("MySelection")
  11.     ),
  12.     navbarPage(
  13.       title = "Test",  
  14.       id = "test", 
  15.       selected = "One", 
  16.       
  17.       tabPanel(title = "One",
  18.                
  19.                div("some links", style = "margin-top: 6rem;"),
  20.                div(uiOutput(outputId = "test_ui"))
  21.                
  22.       )
  23.       
  24.     )
  25.     
  26.   )
  27. )
  29. server = function(input, output, session){
  30.   
  31.   output$test_ui  = renderUI({
  32.     tagList(
  33.       div(class = "link-section",
  34.           tags$a("link_one"),
  35.           tags$a("link_two"),
  36.           tags$a("link_three")
  37.           # in case of more delayed events or interactions : 
  38.           # , shinyjs::hidden( textInput("hiddenInput","hiddenlabel"))
  39.       ),
  40.     )
  41.     
  42.   })
  44.   # in case of more delayed events or interactions : 
  45.   # observeEvent(input$hiddenInput,{
  46.   #   js$MySelection()  
  47.   # })
  48.   
  49.   shiny::onFlushed(
  50.     function() {
  51.       js$MySelection()  
  52.     }
  53.   )
  54.   
  55.   
  56. }
  58. shinyApp(ui = ui, server = server)

Pure Shiny without shinyjs

custom.js:

  1. $(document ).on("shiny:sessioninitialized", function(event) {
  2.   MySelection=function() {
  3.     let links = document.querySelectorAll(".link-section a");
  4.     console.log(links);
  5.   }
  6. })

app.R:

  1. library(shiny)
  2. ui =fluidPage(
  3.   div(
  5.     tags$head(tags$script(type="text/javascript",src="custom.js")),
  6.     navbarPage(
  7.       title = "Test",  
  8.       id = "test", 
  9.       selected = "One", 
  10.       
  11.       tabPanel(title = "One",
  12.                
  13.                div("some links", style = "margin-top: 6rem;"),
  14.                div(uiOutput(outputId = "test_ui"))
  15.                
  16.       )
  17.       
  18.     )
  19.     
  20.   )
  21. )
  23. server = function(input, output, session){
  24.   
  25.   output$test_ui  = renderUI({
  26.     tagList(
  27.       div(class = "link-section",
  28.           tags$a("link_one"),
  29.           tags$a("link_two"),
  30.           tags$a("link_three")
  31.       ),
  32.       tags$script(type="text/javascript", "MySelection()")
  33.     )
  34.     
  35.   })
  37.   
  38. }
  40. shinyApp(ui = ui, server = server)

huangapple
  • 本文由 发表于 2023年2月16日 16:44:47
  • 转载请务必保留本文链接：https://go.coder-hub.com/75469719.html
  • javascript
  • shiny
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定