shiny 在 iframe 中未定义

在embedded iframe中，不能使用父帧中的变量.这是出于安全原因.所以Shiny永远不会在iframe中定义，任何shiny事件都不能在iframe中收听.

您看到的是:

console.log("script starts")
$(document).on('shiny:connected', function() {
  console.log("oh yeah")
  // do some other things
});
console.log("script ends")

// index.js:1 script starts
// index.js:6 script ends

您可以看到中间部分从不运行，因为根本没有shiny:connected事件.当您收听未知事件时，遗憾的是它不会报告任何错误消息.

对此的更改使其更加清晰:

console.log("script starts")
$(function(){
    console.log(Shiny)
})
console.log("script ends")

index.js:1 script starts
index.js:5 script ends
jquery.min.js:2 jQuery.Deferred exception: Shiny is not defined ReferenceError: Shiny is not defined
    at HTMLDocument.<anonymous> (http://127.0.0.1:3168/www/index.js:3:17)
    at e (https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30005)
    at t (https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30307) undefined
jquery.min.js:2 Uncaught ReferenceError: Shiny is not defined
    at HTMLDocument.<anonymous> (index.js:3:17)
    at e (jquery.min.js:2:30005)
    at t (jquery.min.js:2:30307)

即使我们等待文档准备就绪，您也可以看到仍然没有Shiny个.

然后你会问jquery是从哪里来的.嗯，你是在index.html分 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>秒的时候被引进的.这就是为什么你可以使用jquery，但不能使用Shiny.

Solution

一个简单的解决方案是使用服务器端渲染，因此它确保在初始化Shiny之后设置iframe.

library(shiny)

addResourcePath('www', "./")
ui <- fluidPage(
    uiOutput("iframe")
)

server <- function(input, output, session) {
    output$iframe <- renderUI({
        tags$iframe(src="www/index.html", height = 600, width = 600)
    })
}

shinyApp(ui, server)

这只解决了部分问题.我看到您有一个自定义处理程序，它根据Shiny控制的其他一些东西发出更新命令.在这种情况下，没有简单的解决方案，您需要cross-origin communication.

在下一个示例中，我使用一个按钮来模拟更新事件，它由shiny observeEvent控制.单击后，它将发送sendCustomMessage.在UI上，我们添加一些脚本来侦听此消息，然后将事件通过postMessage发送到iframe.

library(shiny)

addResourcePath('www', "./")
ui <- fluidPage(
    uiOutput("iframe"),
    actionButton("update", "update"),
    tags$script(HTML(
    "
    Shiny.addCustomMessageHandler('handler1', function(data){
        if(data.msg !== 'update') return ;
        $('#myiframe')[0].contentWindow.postMessage(data.msg, '*');
    });
    "
    ))
)

server <- function(input, output, session) {
    output$iframe <- renderUI({
        tags$iframe(id = "myiframe", src="www/index.html", height = 600, width = 600)
    })
    
    observeEvent(input$update, {
        session$sendCustomMessage("handler1", list(msg = "update"))
    }, ignoreInit = TRUE)
}

shinyApp(ui, server)

在iframe index.js中，我们使用window.onmessage侦听器来捕获消息

console.log("script starts")
$(function(){
    window.addEventListener("message", (e) => {
        if (e.data === 'update') $('body').append('<h1>Oh yeah !</h1>');
    });
})
console.log("script ends")

此示例在每次从父站点单击update到iframe时都会附加一个h1.