Auto-size Height in R iframe

Question

I'm trying to auto-size the Height on an iframe in R. Here is an example where it's very thin:

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)

I've purposely set scrolling = 'no' because I don't want to use the URL scrolling. I want the scrolling to happen on the R server. There is no height = "100%" setting, but I had a friend send me this who said this should auto size the iframe, but I haven't a clue on how to incorporate it into my R code:

<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 file: https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.16/iframeResizer.contentWindow.min.js

github link: https://github.com/davidjbradshaw/iframe-resizer

Any help or directions would be apprectiated. Thanks!

I don't think your friend's solution will work unless you. From its doc: "The second file (iframeResizer.contentWindow.min.js) needs placing in the page(s) contained within your iFrame" — SmokeyShakers, Dec 20 '19 at 16:51
I don't THINK you can do exactly what you're trying to do. For your iframe to be the proper size, it needs to know the size of the content of the source. Your javascript can't interact with the content of the iframe. — SmokeyShakers, Dec 20 '19 at 19:08
I believe it to be possible only because I've spent a couple of hours reading forums that show how to do it using JS, however, I'm not familiar with JS to understand how to incorporate it into R. Thanks for you help though, hopefully someone else can chime in. — lumiukko, Dec 20 '19 at 19:34
I've copied added the ```iframeResizer.min.js``` to the ```www``` folder and am calling it with ```tags$head( tags$script(src = "iframeResizer.min.js")#, type="text/javascript") )```. But I'm unsure how to call the iFrameResize script in the iframe. — lumiukko, Jan 08 '20 at 15:12
The problem in your case is that macrumors.com needs be using the other part of iframeResizer. That's what I was saying in my first comment. — SmokeyShakers, Jan 08 '20 at 15:18
macrumors.com is only a fill in. The actual site I'm linking to does indeed use it. — lumiukko, Jan 08 '20 at 15:30

score 0 · Accepted Answer · answered Jan 08 '20 at 15:48

Assuming it's setup properly on the iframe content site, try:

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')"))
        )
    )
)

Ahh yes, that works, thank you! It was the ```id``` that was the key. — lumiukko, Jan 08 '20 at 16:11

score 0 · Answer 2 · answered Mar 01 '21 at 11:36

I couldn't get this solution to work, so, after some digging, I found this SO answer to a similar question buried in the comments by a user named Zeni:

set height in style of iframe to 100vh. (vh is viewport height) – Zeni

In the context of shiny, this means you would simply change the iframe tag to

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

I imagine there are some extra benefits to the js package mentioned, but for simply auto-adjusting the height of the iframe, this worked well for me. No need to add any extra js or scripts.

Auto-size Height in R iframe

2 Answers2