本文旨在解决shiny应用中点击按钮时，外部链接默认在当前窗口打开的问题。通过引入自定义javascript消息处理器，结合动态创建的html `` 元素并设置 `target='_blank'` 属性，可以实现在用户点击按钮后，将指定url在新标签页或新窗口中打开，从而提升用户体验和应用功能性。
在Shiny应用开发中，我们经常会遇到需要用户点击某个按钮后，跳转到一个新的外部URL的场景。常见的做法是利用JavaScript的 window.location 进行重定向。然而，这种方法会将用户从当前Shiny应用页面导航走，导致应用在同一窗口被替换，这在很多情况下并非理想的用户体验，尤其当外部链接需要在新标签页或新窗口中打开时。直接尝试 window.open 也可能因上下文限制而无法如预期般工作。
为了解决这一问题，我们可以结合Shiny的自定义消息机制和HTML的 <a> 元素特性，实现点击按钮在新标签页或新窗口中打开指定链接。
核心原理与实现步骤
该解决方案的核心在于：
- Shiny服务器端：通过 session$sendCustomMessage 向客户端发送一个包含目标URL的自定义消息。
- 客户端JavaScript：注册一个自定义消息处理器，当接收到服务器端的消息时，动态创建一个隐藏的HTML <a> 元素，设置其 href 为目标URL，并关键性地设置 target='_blank' 属性，然后模拟点击该元素，最后将其从DOM中移除。
示例代码
以下是实现这一功能的完整Shiny应用代码：
library(shiny)
# 定义客户端JavaScript代码
# 该脚本监听名为 'mymessage' 的自定义消息
# 当收到消息时，它会创建一个隐藏的<a>元素，设置其href和target='_blank'
# 然后模拟点击该链接，使其在新标签页/窗口中打开，最后移除该元素。
myjs <- "Shiny.addCustomMessageHandler('mymessage', function(message) {
var a = document.createElement('a'); // 创建一个<a>元素
a.style.display = 'none'; // 隐藏该元素
a.href = message; // 设置链接地址
a.target = '_blank'; // 关键：在新标签页/窗口中打开
document.body.appendChild(a); // 将元素添加到DOM中（临时）
a.click(); // 模拟点击该链接
a.remove(); // 从DOM中移除该元素
});"
ui <- fluidPage(
# 将自定义JavaScript代码注入到页面头部
tags$head(tags$script(myjs)),
# 创建一个按钮，用于触发重定向
actionButton("button", "点击我打开StackOverflow")
)
server <- function(input, output, session) {
# 监听按钮点击事件
observeEvent(input$button,{
# 定义要打开的URL
url <- "https://stackoverflow.com/"
# 向客户端发送自定义消息，包含目标URL
session$sendCustomMessage("mymessage", url)
})
}
# 运行Shiny应用
shinyApp(ui, server)代码详解
-
myjs 变量中的JavaScript代码：
- Shiny.addCustomMessageHandler('mymessage', function(message) { ... });：这是Shiny提供的一种机制，用于在R会话和JavaScript客户端之间传递数据。'mymessage' 是消息的名称，message 参数将接收从R端发送过来的URL。
- var a = document.createElement('a');：动态创建一个HTML <a> 标签。
- a.style.display = 'none';：将这个链接元素设置为不可见，因为它只是一个工具，不需要实际显示给用户。
- a.href = message;：将从R端接收到的URL赋值给 <a> 元素的 href 属性。
- a.target = '_blank';：这是实现新标签页/窗口打开的关键。_blank 是一个特殊的 target 值，指示浏览器在一个新的、未命名的窗口或标签页中加载链接的文档。
- document.body.appendChild(a);：将新创建的 <a> 元素临时添加到文档的 <body> 中。这是必要的，因为只有在DOM中的元素才能被“点击”。
- a.click();：通过JavaScript模拟用户点击这个 <a> 元素。一旦被点击，浏览器就会按照 href 和 target 属性的指示打开新页面。
- a.remove();：在链接打开后，立即将这个临时的 <a> 元素从DOM中移除，保持页面整洁。
-
ui 函数：
- tags$head(tags$script(myjs))：这行代码将我们定义的 myjs JavaScript字符串作为 <script> 标签插入到HTML页面的 <head> 部分，确保在页面加载时客户端脚本可用。
- actionButton("button", "点击我打开StackOverflow")：创建一个标准的Shiny按钮。
-
server 函数：
- observeEvent(input$button, { ... });：这是一个事件监听器，当 input$button 的值（即按钮被点击的次数）发生变化时触发。
- url <- "https://stackoverflow.com/"：定义了目标URL。你可以根据需要替换为任何外部链接。
- session$sendCustomMessage("mymessage", url)：这是将URL从服务器端发送到客户端JavaScript的关键函数。它会触发客户端 Shiny.addCustomMessageHandler('mymessage', ...) 中定义的函数，并将 url 作为 message 参数传递过去。
注意事项
- 浏览器弹窗拦截器：虽然这种方法模拟了用户点击，通常能够绕过大多数浏览器对未经用户直接交互触发的弹窗拦截，但在某些严格的浏览器设置下，仍有被拦截的风险。建议在应用中提供友好的提示。
- 用户体验：在新标签页中打开外部链接通常能提供更好的用户体验，因为它允许用户在不离开当前Shiny应用的情况下查阅外部信息。
- 动态URL：这种方法非常灵活，url 变量可以在 observeEvent 内部根据应用状态、用户输入等动态生成。
总结
通过上述方法，我们可以在Shiny应用中优雅地实现点击按钮在新标签页或新窗口打开外部链接的功能。这种结合服务器端R逻辑与客户端JavaScript交互的模式，是扩展Shiny应用功能、提升用户体验的强大工具。掌握这种技术，能够帮助开发者构建更加灵活和用户友好的Shiny应用。
