如何获取Shiny中uiOutput生成的UI元素位置与尺寸？

要获取uiOutput生成的动态UI元素的位置、宽高，你需要借助JavaScript读取前端DOM元素的属性，再将数据传递给Shiny后端server，进而调整其他元素（比如你的plotOutput）的尺寸。以下是具体实现方案：

核心思路 #

Shiny的R代码无法直接访问前端DOM元素的几何属性，必须通过JS获取后，用Shiny.setInputValue()将数据发送到server端，server接收后即可根据这些值动态调整目标元素的参数。

完整代码示例 #

library(shiny)

ui <- fluidPage(
    sidebarLayout(
        sidebarPanel(
            "There is some more stuff here normally"
        ),
        mainPanel(
            # 给uiOutput添加ID，方便JS选择
            uiOutput("ui_element", id = "dynamic_ui"),
            plotOutput("plot")
        )
    ),
    # 添加自定义JavaScript代码
    tags$script(HTML("
        // 监听动态UI元素加载完成
        $(document).on('shiny:value', function(event) {
            if (event.target.id === 'dynamic_ui') {
                // 获取目标元素
                const elem = document.getElementById('dynamic_ui');
                // 获取位置（相对于文档）
                const rect = elem.getBoundingClientRect();
                const position = {
                    top: rect.top + window.scrollY,
                    left: rect.left + window.scrollX,
                    width: rect.width,
                    height: rect.height
                };
                // 将数据发送给Shiny server
                Shiny.setInputValue('ui_dimensions', position);
            }
        });
    "))
)

server <- function(input, output) {
    output$ui_element <- renderUI({
        div(
            "This is just some text to demonstrate. Usually there are some pictures embedded here as well,
            this is why it I use renderUI. I would like to know the position / size of this ui element",
            style = "padding: 20px; background: #f0f0f0; margin-bottom: 10px;"
        )
    })
    
    output$plot <- renderPlot({
        # 等待获取到UI元素的尺寸数据
        req(input$ui_dimensions)
        
        # 根据UI元素的高度调整plot的高度（示例：plot高度 = UI元素高度 + 50）
        plot_height <- input$ui_dimensions$height + 50
        
        # 绘制指定尺寸的图
        par(mar = c(4,4,2,1))
        plot(1:5, 1:5, main = paste("Plot adjusted to UI height:", plot_height, "px"))
    }, height = function() {
        # 动态设置plot高度
        req(input$ui_dimensions)
        input$ui_dimensions$height + 50
    })
}

shinyApp(ui = ui, server = server)

关键部分解释 #

• JavaScript监听：使用shiny:value事件监听uiOutput元素的渲染完成事件，确保元素加载后再读取尺寸。getBoundingClientRect()方法可以获取元素相对于视口的位置，加上滚动偏移量得到相对于文档的绝对位置。
• 数据传递：通过Shiny.setInputValue()将位置和尺寸数据封装成对象，发送到server端的input$ui_dimensions。
• 动态调整plot：在renderPlot中用req()等待数据就绪，然后通过height参数的函数式写法，根据UI元素的高度动态设置plot的高度。

扩展说明 #

• 如果你的动态UI包含图片等异步加载的内容，需要额外监听图片的load事件，确保所有内容加载完成后再获取尺寸，避免得到不完整的数值。
• 除了高度和位置，你还可以根据需求获取其他DOM属性，比如offsetWidth、clientTop等。

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