在闪亮的应用程序中捕获 iframe 内的点击答案

【问题标题】：Capture click within iframe in a shiny app在闪亮的应用程序中捕获 iframe 内的点击
【发布时间】：2018-02-16 01:50:27
【问题描述】：

我想在闪亮的应用程序中捕获对 iframe 内链接的点击。我想知道点击了哪个链接。

外面闪亮这工作正常。我为相关问题添加了一个完全可重现的示例： https://stackoverflow.com/a/46093537/3502164 （它必须在（本地）服务器上运行，例如xaamp）。

我的尝试：

1) 应用保存在Path/To/App。

2) 在www 文件夹中存储应该在iframe 中显示的html 文件。

fileWithLink.html

<html>
<body>
<a href="https://stackoverflow.com/">SOreadytohelp</a>
</body>
</html>

3) 应用程序必须以runApp("Path/To/App", launch.browser = TRUE) 启动（以便启动本地服务器）。

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  htmlOutput("filecontainer")
)

server <- function(input, output, session){
  session$onFlushed(once = T, function(){
      runjs("
          console.log('I arrive here')
          $('#filecontainer').load(function(){
            console.log('But not here')  
            var iframe = $('#filecontainer').contents();
            iframe.find('#a').click(function(){
              alert('I want to arrive here');
            });
          });
      ")
  })  

  output$filecontainer <- renderUI({
    tags$iframe(src = "fileWithLink.html", height = 600, width = 1200)
  })
}

shinyApp(ui, server)

【问题讨论】：

标签： javascript jquery r iframe shiny

【解决方案1】：

iframe 包含在具有相关 ID ($('#filecontainer iframe')) 的 div 中。有一个错字调用锚标签。我更改了目的地以避免跨脚本问题：

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  htmlOutput("filecontainer")
)

server <- function(input, output, session){
  session$onFlushed(once = T, function(){
    runjs("
          console.log('I arrive here')
          $('#filecontainer iframe').load(function(){
            console.log('But not here')  
            var iframe = $('#filecontainer iframe').contents();
            iframe.find('a').click(function(){
              console.log('am i here')  
              alert('I want to arrive here');
            });
          });
          ")
  })  

  output$filecontainer <- renderUI({
    tags$iframe(src = "fileWithLink.html", height = 600, width = 1200)
  })
  }

shinyApp(ui, server)

fileWithLink.html

<html>
<body>
<a href="anotherpage.html">SOreadytohelp</a>
</body>
</html>

另一个页面.html

<html>
<body>
Another page
</body>
</html>

【讨论】：