本文将详细介绍如何在 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() 的某些限制，并确保链接在新标签页或窗口中打开。
核心思想是：
在 Shiny 的 server 端，当按钮被点击时，通过 session$sendCustomMessage 向客户端发送一个包含目标 URL 的自定义消息。在 Shiny 的 ui 端，通过 tags$head(tags$script(…)) 注入一段 JavaScript 代码，该代码包含一个 Shiny.addCustomMessageHandler 来监听并处理这个自定义消息。在 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)
代码解析：
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 中移除这个临时的 元素，保持页面的整洁。
ui 部分：
tags$head(tags$script(myjs))：将定义好的 JavaScript 代码注入到 HTML 页面的 区域。这样，当 Shiny 应用加载时，myjs 中的 JavaScript 代码就会被执行，Shiny.addCustomMessageHandler 就会注册成功。actionButton(“button”, “点击我打开新标签页”)：创建一个标准的 Shiny 按钮。
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 应用中实现按钮点击跳转新标签页或新窗口的最佳实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1532160.html
微信扫一扫 
支付宝扫一扫 
