R iframe中的自动调整高度答案

【问题标题】：Auto-size Height in R iframeR iframe中的自动调整高度
【发布时间】：2020-04-13 03:33:34
【问题描述】：

我正在尝试在 R 中自动调整 iframe 的高度。这是一个非常薄的示例：

header <- dashboardHeader(title = "Tools", titleWidth = 225)

sidebar <- dashboardSidebar(width = 225,
                            sidebarMenu(id="mySidebarMenu",
                                        menuItem(text = "Welcome", tabName = "Tools", icon = icon("apple"))
                                        )
)

body <- dashboardBody(class="text-center",
                      tabItems(
                        tabItem("Tools", class = "text-center",
                                tags$iframe(src = "https://www.macrumors.com", width = "100%", scrolling = 'no')
                        )
                      )
)

ui <- dashboardPage(header, sidebar, body, skin = 'blue')

server <- function(input, output){}

shinyApp(ui, server)

我特意设置了scrolling = 'no'，因为我不想使用 URL 滚动。我希望滚动发生在 R 服务器上。没有 height = "100%" 设置，但我有一个朋友给我发了这个，他说这应该自动调整 iframe 的大小，但我不知道如何将它合并到我的 R 代码中：

<iframe style="width: 1px; min-width: 100%;" frameborder="0" scrolling="no" src="source goes here"></iframe>
            <script>iFrameResize({autoResize:true, log:true, checkOrigin:false})</script>

Javascript 文件： https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.16/iframeResizer.contentWindow.min.js

github链接： https://github.com/davidjbradshaw/iframe-resizer

任何帮助或指示将不胜感激。谢谢！

【问题讨论】：

我认为除非你，否则你朋友的解决方案不会奏效。来自其文档：“第二个文件 (iframeResizer.contentWindow.min.js) 需要放置在 iFrame 中包含的页面中”
无视我朋友的解决方案，还有其他方法吗？
我不认为你可以做你想做的事。为了使您的 iframe 大小合适，它需要知道源内容的大小。您的 javascript 无法与 iframe 的内容进行交互。
我相信这是可能的，因为我花了几个小时阅读论坛，展示如何使用 JS 做到这一点，但是，我不熟悉 JS 以了解如何合并它进入 R。不过，感谢您的帮助，希望其他人可以加入。
我已将iframeResizer.min.js 添加到www 文件夹中，并使用tags$head( tags$script(src = "iframeResizer.min.js")#, type="text/javascript") ) 调用它。但我不确定如何在 iframe 中调用 iFrameResize 脚本。

标签： javascript r iframe shiny

【解决方案1】：

假设它在 iframe 内容网站上正确设置，请尝试：

body <- dashboardBody(
    class="text-center",
    tabItems(
        tabItem(
            "Tools", 
            class = "text-center",
            tags$iframe(
                src = "https://www.macrumors.com", 
                width = "100%",
                id = 'myIframe'
                scrolling = 'no'
            ),
            tags$script(HTML("iFrameResize({ log: true }, '#myIframe')"))
        )
    )
)

【讨论】：

啊，是的，这行得通，谢谢！ id 是关键。

【解决方案2】：

我无法让这个解决方案发挥作用，因此，经过一番挖掘，我找到了一个名为 Zeni 的用户埋在 cmets 中的 a similar question 的 SO 答案：

将 iframe 样式的高度设置为 100vh。（vh 是视口高度）- Zeni

在闪亮的上下文中，这意味着您只需将 iframe 标记更改为

tags$iframe(
            src = "https://www.macrumors.com", 
            width = "100%",
            style="height: 100vh;"
            scrolling = 'no'
        )

我想提到的 js 包有一些额外的好处，但是对于简单地自动调整 iframe 的高度，这对我来说效果很好。无需添加任何额外的 js 或脚本。

【讨论】：