本文详细介绍了如何在r shiny应用中实现url重定向，使按钮点击能够在新的浏览器标签页或窗口中打开指定链接。针对`window.location`默认在当前标签页打开的问题，文章提供了一种通过shiny自定义消息处理器与javascript动态创建“标签并设置`target=”_blank”`的解决方案，确保链接以预期方式在新标签页打开。
理解Shiny中的自定义消息与JavaScript交互
在Shiny应用中，当我们需要执行一些客户端（浏览器）特有的操作，例如直接操作DOM或触发页面跳转时，通常会借助于R与JavaScript之间的通信机制。session$sendCustomMessage()函数允许R后端向前端发送自定义消息，而前端则通过Shiny.addCustomMessageHandler()来监听并处理这些消息。
最初的尝试通常会使用window.location = message来重定向URL。这种方法确实可以实现页面跳转，但其默认行为是在当前浏览器标签页或窗口中加载新的URL。对于需要新开标签页的需求，这种方法显然无法满足。即使尝试使用window.open，在某些上下文中也可能遇到兼容性或被浏览器拦截的问题，无法稳定实现新标签页的打开。
解决方案：利用动态标签实现新标签页打开
为了确保点击按钮后能在新标签页中打开指定URL，一个更稳健的方法是利用JavaScript动态创建一个隐藏的（锚点）元素，为其设置目标URL和target=”_blank”属性，然后模拟点击该元素。target=”_blank”属性明确指示浏览器在新标签页或新窗口中打开链接。
以下是实现此功能的完整Shiny应用代码：
library(shiny)# 定义JavaScript自定义消息处理器myjs <- "Shiny.addCustomMessageHandler('mymessage', function(message) { // 创建一个隐藏的a元素 var a = document.createElement('a'); a.style.display = 'none'; // 隐藏元素 a.href = message; // 设置链接地址 a.target = '_blank'; // 关键：在新标签页/窗口中打开 // 将a元素添加到文档body中 document.body.appendChild(a); // 模拟点击a元素 a.click(); // 移除a元素，保持DOM整洁 a.remove();});"ui <- fluidPage( # 在页面头部引入自定义JavaScript tags$head(tags$script(myjs)), actionButton("button", "点击我，在新标签页打开链接"))server <- function(input, output, session) { # 监听按钮点击事件 observeEvent(input$button,{ url <- "https://www.stackoverflow.com/" # 目标URL # 向前端发送自定义消息，携带目标URL session$sendCustomMessage("mymessage", url) })}# 运行Shiny应用shinyApp(ui, server)
代码解析
myjs变量中的JavaScript代码：
Shiny.addCustomMessageHandler(‘mymessage’, function(message) { … });：注册一个名为’mymessage’的自定义消息处理器。当R后端发送此消息时，该函数将被执行，message参数将包含R传递过来的URL。var a = document.createElement(‘a’);：在内存中创建一个新的 HTML元素。a.style.display = ‘none’;：将新创建的元素设置为不可见，避免在页面上短暂闪现或影响布局。a.href = message;：将从R后端接收到的URL赋值给元素的href属性。a.target = ‘_blank’;：这是实现新标签页打开的关键。它告诉浏览器，当这个链接被激活时，应在一个新的空白窗口或标签页中加载目标URL。document.body.appendChild(a);：将隐藏的元素添加到文档的中。虽然它被隐藏了，但必须先将其添加到DOM中才能模拟点击。a.click();：通过JavaScript程序化地触发元素的点击事件。这会模拟用户点击链接的行为，从而在新标签页中打开URL。a.remove();：在链接被激活后，立即将这个临时的元素从DOM中移除，保持页面干净。
ui部分：
tags$head(tags$script(myjs))：将包含自定义JavaScript代码的myjs变量注入到Shiny应用的HTML头部。这确保了在页面加载时，自定义消息处理器就已经注册。actionButton(“button”, “点击我，在新标签页打开链接”)：创建一个标准的Shiny按钮。
server部分：
observeEvent(input$button, { … })：监听名为”button”的按钮的点击事件。url session$sendCustomMessage(“mymessage”, url)：当按钮被点击时，R后端通过session$sendCustomMessage()函数向前端发送一个名为”mymessage”的消息，并将url作为数据传递给前端的JavaScript处理器。
注意事项
浏览器弹出窗口拦截器：虽然此方法通常能够绕过一些简单的弹出窗口拦截器，但如果用户的浏览器设置得非常严格，或者安全软件介入，仍有极小可能性会被拦截。通常，由于这是用户主动触发的点击事件，被拦截的几率较低。用户体验：频繁地在新标签页打开链接可能会对用户体验造成一定影响，用户可能需要手动关闭大量标签页。在设计应用时，应权衡何时使用新标签页，何时在当前标签页内跳转。URL的安全性：确保你重定向的URL是可信的。如果URL是动态生成的，请务必进行适当的验证和清理，以防止潜在的安全漏洞（如开放重定向攻击）。
总结
通过上述方法，我们成功地解决了Shiny应用中按钮点击在新标签页打开URL重定向的问题。这种利用JavaScript动态创建标签并模拟点击的策略，比直接使用window.location或不当使用window.open更加灵活和可靠，为Shiny应用提供了更高级的客户端交互能力。
以上就是Shiny应用中实现按钮点击在新标签页/窗口打开URL重定向的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1532199.html
微信扫一扫 
支付宝扫一扫 
