RMarkdown添加runtime: shiny后HTML标签页JavaScript失效问题

当在RMarkdown文档的YAML配置中添加runtime: shiny后，原本正常工作的自定义HTML标签页（基于CSS和JavaScript实现）会出现内容无法显示的问题，而普通RMarkdown模式下一切正常。

问题根源 #

1. DOM渲染时机差异：Shiny应用采用动态DOM渲染机制，原生JavaScript代码可能在页面元素尚未完全加载时执行，导致getElementsByClassName等方法无法找到目标元素。
2. 事件绑定失效：直接绑定在按钮上的onclick事件，在Shiny动态生成元素的场景下会失效，因为绑定操作早于元素创建。
3. 样式优先级冲突：自定义CSS可能被Shiny的默认样式覆盖，导致标签页内容隐藏或样式异常。

解决方案 #

方案一：使用Shiny原生标签页组件（推荐）

Shiny内置了tabsetPanel和tabPanel组件，完全适配Shiny运行时，无需自定义HTML/JS，还能轻松匹配原有样式：

---
title: "Untitled"
author: "John Doe"
date: "2022-11-28"
output: html_document
runtime: shiny
---

knitr::opts_chunk$set(echo = TRUE)

tabsetPanel(
  tabPanel("Application 1", p("This is the content for application 1.")),
  tabPanel("Application 2", p("This is the content for application 2.")),
  id = "custom-tab-container",
  type = "tabs"
)

#### 方案二：修改自定义JS适配Shiny动态DOM
如果必须保留原有HTML结构，需要调整JavaScript的执行时机和事件绑定方式，确保在Shiny初始化完成后操作DOM，并使用事件委托处理动态元素：
1. 修改按钮HTML，移除`onclick`属性，添加`data-tabname`标记目标tab：
```html
<div class="tab">
  <button class="tablinks active" data-tabname="app_1">Application 1</button>
  <button class="tablinks" data-tabname="app_2">Application 2</button>
</div>

<!-- Tab content 保持不变 -->
<div id="app_1" class="tabcontent" style="display:block">
This is the content for application 1.
</div>

<div id="app_2" class="tabcontent">
This is the content for application 2.
</div>

2. 替换原有JavaScript代码，使用Shiny的初始化事件和jQuery事件委托：

<script>
// 等待Shiny连接完成后初始化标签页逻辑
$(document).on('shiny:connected', function() {
  // 用事件委托绑定按钮点击事件
  $(document).on('click', '.tablinks', function(evt) {
    const targetTab = $(this).data('tabname');
    
    // 隐藏所有tab内容
    $('.tabcontent').hide();
    // 移除所有按钮的active类
    $('.tablinks').removeClass('active');
    // 显示目标tab并标记按钮为active
    $('#' + targetTab).show();
    $(this).addClass('active');
  });
  
  // 触发初始化active按钮的点击事件，确保默认显示正确tab
  $('.tablinks.active').trigger('click');
});
</script>

方案三：提升自定义CSS优先级

如果存在样式被Shiny默认样式覆盖的问题，可通过增加选择器特异性来提高自定义样式的优先级：

<style type = "text/css">
body .tab {
  overflow: hidden;
}

body .tab button {
  background-color: #f1e4ff;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  margin-left:0.3em;
}

body .tab button:hover {
  background-color: #e4e5ff;
}

body .tab button.active {
  background-color: #ffe4ff;
}

body .tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
}
</style>

总结 #

优先选择Shiny原生标签组件，它与Shiny运行时完全兼容，减少调试成本；若需保留自定义HTML结构，调整JavaScript的执行时机和事件绑定方式是核心解决手段。

内容的提问来源于stack exchange，提问作者pinawa