Shiny 应用中实现按钮点击跳转新标签页或新窗口的最佳实践

本文将详细介绍如何在 r shiny 应用中，通过点击按钮实现页面跳转到新的浏览器标签页或窗口。针对 `window.location` 默认在当前页面重定向的问题，我们将展示如何利用 javascript 的 `` 元素结合 `target='_blank'` 属性，通过 shiny 的自定义消息机制优雅地解决这一需求，提供完整的代码示例和实现步骤。

Shiny 应用中页面重定向的挑战

在 Shiny 应用开发中，我们经常需要实现用户点击某个按钮后，页面跳转到外部链接的功能。一个常见的实现方式是使用 JavaScript 的 window.location 来改变当前页面的 URL。然而，这种方法默认会在当前浏览器标签页或窗口中加载新的 URL，这通常不是我们期望的用户体验，因为这会导致用户离开当前的 Shiny 应用页面。

另一种尝试是使用 window.open() 函数。虽然 window.open() 理论上可以打开新窗口或标签页，但在 Shiny 的自定义消息处理环境中直接调用时，可能会遇到浏览器弹窗拦截的问题，尤其是在该调用并非由用户直接的、同步的交互事件触发时。因此，我们需要一种更可靠、更优雅的解决方案。

解决方案：利用 JavaScript 元素实现新标签页跳转

为了解决上述问题，我们可以采用一种巧妙的方法：在 JavaScript 中动态创建一个临时的 （锚点）元素，设置其 href 属性为目标 URL，并将其 target 属性设置为 _blank，然后通过 JavaScript 模拟点击这个 元素。这种方法能够有效地绕过浏览器对 window.open() 的某些限制，并确保链接在新标签页或窗口中打开。

核心思想是：

1. 在 Shiny 的 server 端，当按钮被点击时，通过 session$sendCustomMessage 向客户端发送一个包含目标 URL 的自定义消息。
2. 在 Shiny 的 ui 端，通过 tags$head(tags$script(...)) 注入一段 JavaScript 代码，该代码包含一个 Shiny.addCustomMessageHandler 来监听并处理这个自定义消息。
3. 在 JavaScript 消息处理器中，动态创建 元素，设置其 href 和 target='_blank'，然后将其添加到 DOM 中，模拟点击，最后将其从 DOM 中移除。

详细实现步骤与代码示例

以下是实现这一功能的完整 Shiny 应用代码：

library(shiny)

# 定义 JavaScript 代码，用于处理自定义消息并打开新标签页
myjs <- "Shiny.addCustomMessageHandler('mymessage', function(message) {
      // 1. 创建一个新的 'a' (锚点) 元素
      var a = document.createElement('a');
      // 2. 将其设置为不可见，避免影响页面布局
      a.style.display = 'none';
      // 3. 设置 'a' 元素的 href 属性为收到的 URL
      a.href = message;
      // 4. 关键：设置 target='_blank' 以在新标签页/窗口中打开链接
      a.target = '_blank';
      // 5. 将 'a' 元素添加到文档的 body 中
      document.body.appendChild(a);
      // 6. 模拟用户点击这个 'a' 元素
      a.click();
      // 7. 移除已使用的 'a' 元素，保持 DOM 清洁
      a.remove();
});"

ui <- fluidPage(
  # 在页面头部引入自定义 JavaScript 代码
  tags$head(tags$script(myjs)),     
  # 创建一个按钮
  actionButton("button", "点击我打开新标签页")
)

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

  # 监听按钮点击事件
  observeEvent(input$button,{
    # 定义要跳转的 URL
    url <- "https://www.r-project.org/" # 示例：R Project 官网
    # 通过自定义消息将 URL 发送给客户端的 JavaScript
    session$sendCustomMessage("mymessage", url)
  })
}

# 运行 Shiny 应用
shinyApp(ui, server)

代码解析：

标贝AI虚拟主播

一站式虚拟主播视频生产和编辑平台

69

查看详情

1. myjs 变量中的 JavaScript 代码：

   • Shiny.addCustomMessageHandler('mymessage', function(message) { ... });：这是 Shiny 提供的一个机制，用于注册一个客户端 JavaScript 函数来处理从服务器端发送的特定自定义消息（这里是 'mymessage'）。当服务器发送 'mymessage' 类型的消息时，这个函数就会被执行，message 参数将包含服务器发送的数据（即目标 URL）。
   • var a = document.createElement('a');：动态创建一个 HTML 元素。
   • a.style.display = 'none';：将创建的 元素设置为不可见，因为它只是用于触发跳转，不需要在页面上显示。
   • a.href = message;：将服务器发送过来的 URL 赋值给 元素的 href 属性。
   • a.target = '_blank';：这是实现新标签页跳转的关键。 _blank 告诉浏览器在新标签页或新窗口中打开链接。
   • document.body.appendChild(a);：将创建的 元素临时添加到 元素中。虽然它是不可见的，但必须将其添加到 DOM 中才能被“点击”。
   • a.click();：通过 JavaScript 模拟一次点击操作，触发 元素的默认行为，即打开 href 指定的链接。
   • a.remove();：在链接打开后，立即从 DOM 中移除这个临时的 元素，保持页面的整洁。

2. ui 部分：

   • tags$head(tags$script(myjs))：将定义好的 JavaScript 代码注入到 HTML 页面的 区域。这样，当 Shiny 应用加载时，myjs 中的 JavaScript 代码就会被执行，Shiny.addCustomMessageHandler 就会注册成功。
   • actionButton("button", "点击我打开新标签页")：创建一个标准的 Shiny 按钮。

3. server 部分：

   • observeEvent(input$button, { ... })：监听 button 按钮的点击事件。
   • url
   • session$sendCustomMessage("mymessage", url)：当按钮被点击时，服务器通过 session$sendCustomMessage 函数向客户端发送一个名为 'mymessage' 的自定义消息，并将 url 作为消息内容传递过去。这个消息会被客户端的 JavaScript 消息处理器接收并处理。

注意事项与总结

• 浏览器兼容性：这种方法利用了标准的 HTML 元素和 JavaScript DOM 操作，具有良好的浏览器兼容性。
• 用户体验：在新标签页中打开链接可以避免用户离开当前 Shiny 应用，提升用户体验。
• 弹窗拦截：由于 a.click() 是在 Shiny 的自定义消息处理器中调用的，而这个处理器通常是在用户点击按钮后异步触发的，某些浏览器可能会将这种非直接用户交互触发的 window.open 或类似行为视为弹窗并拦截。然而，通过创建 元素并模拟点击的方式，通常比直接调用 window.open() 更不容易被拦截，因为它更接近用户直接点击链接的自然行为。
• 代码清理：在完成跳转后立即移除动态创建的 元素是一个良好的实践，可以避免不必要的 DOM 元素堆积。

通过上述方法，我们可以在 Shiny 应用中优雅且可靠地实现按钮点击跳转到新标签页或新窗口的功能，极大地增强了应用的交互性和用户体验。

以上就是Shiny 应用中实现按钮点击跳转新标签页或新窗口的最佳实践的详细内容，更多请关注php中文网其它相关文章！