如何在Shiny App中通过URL渲染HTML文件且不破坏其他交互图表表格

你遇到的交互失效、样式错乱问题和GET请求、文件存储位置完全无关，本质是外部HTML内容直接注入Shiny的DOM树导致的依赖冲突：

• 不管是用renderText插入远程拉取的HTML文本，还是用includeHTML调用本地文件，都是直接把外部HTML的完整内容（包括自带的CSS、JS依赖、全局变量定义）插入当前Shiny页面的DOM结构中
• 外部HTML自带的jQuery/Bootstrap版本、全局样式规则、JS变量很容易和Shiny本身的依赖冲突，覆盖原有样式、打断Shiny的交互逻辑，就会出现tab字体变红、图表表格无法加载的问题
• GET只是普通的HTTP文本拉取请求，不会替换原有连接，也不需要手动断开，完全不涉及连接层面的问题。

用iframe标签加载外部HTML链接，让外部HTML运行在独立的沙盒环境中，完全和Shiny的运行上下文隔离，不会产生任何依赖冲突，改造成本极低：

代码修改示例 #

1. 删除原有冗余的GET请求、observeEvent中renderText相关的逻辑
2. 把原来的htmlOutput("includeHTML")替换为iframe标签即可：

output$genotyping <- renderUI({
  if (creds_reactive()$user == "Admin") {
    fluidPage(useShinyjs(),
              titlePanel("Github HTML file"),
              mainPanel(
                h3("Click this button to display/hide the html file"),
                br(),
                br(),
                actionButton("genotype", "Click me!"),
                hidden(
                  div(id = 'text_div',
                      # 替换为iframe，直接填raw.githack的链接即可
                      tags$iframe(
                        src = "你的raw.githack HTML文件链接",
                        width = "100%",
                        height = "800px",
                        frameborder = "0"
                      )
                  ) 
                )
              )
    ) 
  } else {
    mainPanel(
      fluidRow(
        align = "center", 
        h3("Sorry! You don't have the permissions required to view this content.")
      )
    )
  }
})

# 保留点击按钮切换显隐的逻辑即可，不需要额外处理HTML加载
observeEvent(input$genotype, {
  toggle('text_div')
})

如果需要动态切换加载的HTML文件，只需要把iframe的src属性做成动态渲染即可，不需要拉取HTML文本。

如果必须直接注入HTML内容，需要手动清理拉取到的HTML文本：删除<head>标签中所有的CSS、JS依赖引入，仅保留<body>标签内的内容，避免覆盖Shiny本身的依赖，该方案需要针对每个HTML文件做适配，不建议使用。

内容的提问来源于stack exchange，提问作者Alan Lin