关于 javascript:如何在闪亮中以编程方式转到 HTML 锚点? | 珊瑚贝

How to go to an HTML anchor programatically in shiny?


我可以使用 a(“Go to Results”, href = ‘#anchor_box’) 在 ui 中添加指向锚点的链接,并让用户单击它以转到该锚点。

但是如何以编程方式将窗口”发送到”#anchor_box?例如,当运行时间较长的 observeEvent() 末尾有结果时?


您可以为此使用 javascript。有几种可能性,一种方法是获取元素并使用 scrollIntoView(),请参阅使用 javascript 进行锚点跳转。

在 shiny 中使用 javascript 的一种简单方法是 library(shinyjs).

您可以插入以下内容来告诉 R 移动焦点元素:

1
2
3
runjs(
      document.getElementById(“anchor_box”).scrollIntoView();
    ‘
)

为了知道何时执行此操作,您可以将其package在 observeEvent() 中:

1
observeEvent(eventExpr = input$clck, handlerExpr = {})

缺点是刷新页面不会自动”向上滚动到顶部”。

可重现的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
library(shiny)
library(shinyjs)

ui <- fluidPage(

  a(“Go to Results”, href = ‘#anchor_box’),
  actionButton(“clck”,“Move Programmatically!”),

  plotOutput(“plot”, height = 1300),  
  div(id =“anchor_box”,“HERE”),
  useShinyjs(),

)

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

  output$plot <- renderPlot({
    plot(1)
  })

  observeEvent(eventExpr = input$clck, handlerExpr = {
    runjs(
      document.getElementById(“anchor_box”).scrollIntoView();
    ‘
)
  })

}

shinyApp(ui, server)


来源:https://www.codenong.com/61757698/

微信公众号
手机浏览(小程序)

Warning: get_headers(): SSL operation failed with code 1. OpenSSL Error messages: error:14090086:SSL routines:ssl3_get_server_certificate:certificate verify failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

Warning: get_headers(): Failed to enable crypto in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

Warning: get_headers(https://static.shanhubei.com/qrcode/qrcode_viewid_8680.jpg): failed to open stream: operation failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57
0
分享到:
没有账号? 忘记密码?