在 r Shiny 中将外部超链接添加到 tabPanel 或 navbarMenu答案

【问题标题】：Add external hyperlink to tabPanel or navbarMenu in r Shiny在 r Shiny 中将外部超链接添加到 tabPanel 或 navbarMenu
【发布时间】：2019-05-04 22:11:47
【问题描述】：

我正在尝试在 Shiny 的 navbarPage 设置中添加外部超链接到 tabPabel 和 navbarMenu 选项卡/下拉菜单（使用 bootstrapPage）。我发现多个问题涉及链接到 Shiny 应用程序中的另一个选项卡，但我想专门链接到另一个网页而不打开新的浏览器窗口。

我发现了以下问题：

How to direct to another web page after clicking tabPanel in Shiny App

Open URL by tabPanel in Shiny

第二个问题是我想做什么；但是，当我使用以下方法来完成此操作时，它会添加一个“幻像”选项卡：

tabPanel(a("Open Sales Gsheet", href="http://google.com", target="_blank"))

以下是我正在使用的 Shiny 应用设置的一些示例代码：

library(shiny); library(shinythemes)

ui <- bootstrapPage("", 
                navbarPage(
                  id = "navbar", 
                  theme = shinytheme("yeti"),
                  title = a("Home", href = "https://google.com", style = "color:white;"),  ## page title with hyperlink and browser tab title (works as intended)

                  tabPanel(title = HTML("Panel_1</a></li><li><a href='http://google.com' target='_blank'>test")),  ## tabPanel hyperlink test (adds "phantom" tab)

                  navbarMenu(title = "Test Menu", 
                             tabPanel(title = a("Open Sales Gsheet", href="http://google.com", target="_blank"))   ## navbarMenu hyperlink test (adds "phantom" option)
                             )
                  )
            )

server <- function(input, output, session) {

  ## empty server

  }

shinyApp(ui, server)

这是“幻影”标签问题的截图：

https://i.imgur.com/tIYbhzT.png

如您所见，tabPanel 和 navbarMenu 选项卡/下拉菜单都添加了额外的“幻像”选项卡。我在上面发布的第一个问题显示了一个涉及编辑 html 代码（或在 R 中生成的列表）的答案......但我无法弄清楚如何使用 tabPanel 或 navbarMenu 对象来做到这一点。

我只是希望它看起来像一个普通的 navbarPage 下拉菜单，其中 tabPanel 和 navbarMenu 选择链接到外部站点（在同一个浏览器窗口中 - browseURL 作为服务器脚本中的 observeEvent 不起作用，因为它在另一个中打开窗户）。任何帮助将不胜感激！

【问题讨论】：

您可以尝试将页面嵌入 iframe，但网站所有者可以决定是否允许这样做：stackoverflow.com/questions/9158024/…。
这实际上可能是我正在寻找的。这将需要一些重新工作，但我想我可能能够使它工作。谢谢！

标签： html r shiny

【解决方案1】：

在闪亮的导航栏页面中添加自定义元素很棘手，但可以使用一些 javascript 来完成。以下代码应将您的链接添加到导航栏中的下拉菜单。将其保存为 .js 文件在您的应用程序的基本目录中，然后将脚本包含在您的 ui 函数中。

navAppend.js 在您应用的基本目录中：

$(document).ready(function() {
  $(".navbar .container-fluid .navbar-nav .dropdown .dropdown-menu").append('<li><a href="https://google.com" target="_blank">Open Sales Gsheet</a></li>');
});

在你的ui:

ui <- tagList(
  tags$head(includeScript("navAppend.js")),
  navbarPage(
    id = "navbar", 
    theme = shinytheme("yeti"),
    title = a("Home", href = "https://google.com", style = "color:white;"),  ## page title with hyperlink and browser tab title (works as intended)

    # nav menu the link will be added to
    navbarMenu(title = "Test Menu")
  )
)

【讨论】：