在下面的应用程序中,我显示了两个图,每次我按下相关的actionbutton()
时,我就会在全屏中得到它们。在全屏模式下,显示第二个actionbutton()
以转义全屏,然后再次隐藏。但我不能让它工作的两个情节,而不是一个基于这个。
library(shiny)
library(ggplot2)
js <- "
function openFullscreen(elem, plotselector) {
$('#exitbtn').show();
$(plotselector).addClass('fullscreen');
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
function exitFullscreen() {
$('#exitbtn').hide();
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
function openFullscreen(elem, plotselector) {
$('#exitbtn2').show();
$(plotselector).addClass('fullscreen2');
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
function exitFullscreen() {
$('#exitbtn2').hide();
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
"
css <- "
#exitbtn {
display: none;
}
.fullscreen {
height: 90% !important;
margin: 0 !important;
}
#exitbtn2 {
display: none;
}
.fullscreen2 {
height: 90% !important;
margin: 0 !important;
}
"
ui <- fluidPage(
tags$head(
tags$script(HTML(js)),
tags$style(HTML(css))
),
br(),
fluidRow(
column(
width = 3,
actionButton(
"fs", "Full screen",
onclick = "openFullscreen(document.getElementById('frame'), '#ggplot');"
)
),
column(
width = 9,
div(
id = "frame",
plotOutput("ggplot"),
actionButton(
"exitbtn", "Exit",
onclick = "exitFullscreen(); $('#ggplot').removeClass('fullscreen');"
)
)
)
),
fluidRow(
column(
width = 3,
actionButton(
"fs2", "Full screen",
onclick = "openFullscreen(document.getElementById('frame'), '#ggplot2');"
)
),
column(
width = 9,
div(
id = "frame",
plotOutput("ggplot2"),
actionButton(
"exitbtn2", "Exit",
onclick = "exitFullscreen(); $('#ggplot2').removeClass('fullscreen');"
)
)
)
)
)
server <- function(input, output, session){
output[["ggplot"]] <- renderPlot({
ggplot(iris, aes(Sepal.Length, Sepal.Width)) + geom_point()
})
output[["ggplot2"]] <- renderPlot({
ggplot(iris, aes(Sepal.Length, Sepal.Width)) + geom_point()
})
}
shinyApp(ui, server)
不要定义名称相同的JavaScript函数。也不要在HTML中使用重复的ID。
js <- "
function openFullscreen(elem, plotselector) {
$(plotselector).addClass('fullscreen');
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}"
fluidRow(
column(
width = 3,
actionButton(
"fs", "Full screen",
onclick = "$('#exitbtn').show(); openFullscreen(document.getElementById('frame'), '#ggplot');"
)
),
column(
width = 9,
div(
id = "frame",
plotOutput("ggplot"),
actionButton(
"exitbtn", "Exit",
onclick = "exitFullscreen(); $('#ggplot').removeClass('fullscreen');"
)
)
)
),
fluidRow(
column(
width = 3,
actionButton(
"fs2", "Full screen",
onclick = "$('#exitbtn2').show(); openFullscreen(document.getElementById('frame2'), '#ggplot2');"
)
),
column(
width = 9,
div(
id = "frame2",
plotOutput("ggplot2"),
actionButton(
"exitbtn2", "Exit",
onclick = "exitFullscreen(); $('#ggplot2').removeClass('fullscreen');"
)
)
)
)
不需要CSS类FullScreen2
。