Html R：嵌入javascript以自定义输出

我正在尝试嵌入javascript和css代码，以便在闪亮的R中自定义

textOutput

，如下所示：

但是js代码部分似乎没有链接到闪亮的R中的

textOutput

这是我的最小可复制演示：

shinyApp(ui = shinyUI(
fluidPage(
  tags$div(
        class = 'box-body-wrapper',
      tags$div(
        class = 'box-body elipsis',
        textOutput("text1") 
      )
      ),

  tags$head(tags$style(HTML("
.box-body div, .box-body h3, .box-body h6 {
  display: inline;
  padding: 0 .25em;
  font-size: 1em;
  vertical-align: bottom;
}
.box-body {
  width: calc(100% - 70px);
  display: inline;
}
.box-body.elipsis {
  display: inline-block;
  white-space: nowrap; 
  text-overflow: ellipsis;
}

.expand-button {
  cursor: pointer;
  color: rgb(0, 147, 211);
  margin: 0;
  display: inline-block;
  vertical-align: top;
}
"
)) ),

tags$head(
tags$script(HTML(
"
const boxBodyWrapper = document.querySelector('.box-body-wrapper');
const boxBody = document.querySelector('.box-body');
const myWidth = document.querySelector('#text1');

if (myWidth.offsetWidth > boxBody.offsetWidth) {
  boxBody.style.overflow = 'hidden';
  const expandButton = document.createElement('div');
  expandButton.innerText='Show All';
  expandButton.classList.add('expand-button');
  boxBodyWrapper.appendChild(expandButton);
  let expandedButton = false;
  expandButton.addEventListener(
    'click', () => {
      boxBody.classList.toggle('elipsis');
      expandedButton = !expandedButton;
      (expandedButton) ? (expandButton.innerText='Show Less') : (expandButton.innerText='Show All');
    }
  )
}
"
)) )

    )
  ),

  server = function(input, output, session){

    output$text1 <- renderText({
      paste("He determined to drop 
his litigation with the monastry, and relinguish his claims to the wood-cuting and 
fishery rihgts at once. He was the more ready to do this becuase the rights had becom much less valuable, 
and he had indeed the vaguest idea where the wood and river in quedtion were.")
    })
  }
)

shinyApp（ui=shinyUI）(
流动摄影(
标签$div(
类='盒体包装器'，
标签$div(
类='框体省略号'，
文本输出（“文本1”）
)
),
标签$head（标签$style（HTML）
.箱体分区，.箱体h3，.箱体h6{
显示：内联；
填充：0.25em；
字号：1em；
垂直对齐：底部对齐；
}
.箱体{
宽度：计算（100%-70px）；
显示：内联；
}
.box-body.省略号{
显示：内联块；
空白：nowrap；
文本溢出：省略号；
}
.展开按钮{
光标：指针；
颜色：rgb（0，147，211）；
保证金：0；
显示：内联块；
垂直对齐：顶部；
}
"
)) ),
标签$head(
标签$script（HTML）(
"
const-boxBodyWrapper=document.querySelector（“.body-wrapper”）；
const-boxBody=document.querySelector（“.boxBody”）；
const myWidth=document.querySelector（'#text1'）；
if（myWidth.offsetWidth>boxBody.offsetWidth）{
boxBody.style.overflow='hidden'；
const expandButton=document.createElement（'div'）；
expandButton.innerText='Show All'；
expandButton.classList.add（'expand-button'）；
boxBodyWrapper.appendChild（展开按钮）；
让expandedButton=false；
expandButton.addEventListener(
'点击'，（）=>{
boxBody.classList.toggle（'elipsis'）；
expandedButton=！expandedButton；
（expandedButton）？（expandButton.innerText='Show Less'）：（expandButton.innerText='Show All'）；
}
)
}
"
)) )
)
),
服务器=功能（输入、输出、会话）{
output$text1由于文本是在应用程序的服务器端创建的，因此文本是在加载页面后添加的。然后，JavaScript代码的问题是，它是在
textOutput
呈现页面中的文本之前执行的。因此，id为
text1
的元素不存在，这就是属性的原因e> offsetWidth

也不存在。最简单的解决方案是稍晚执行JavaScript代码。您可以通过将代码封装在

setTimeout

函数中，并以毫秒为单位指定延迟来完成。下面是您的代码修改，以使用

setTimeout

函数，时间为500毫秒，也许您可以更改这与你的具体问题无关

shinyApp(
ui=shinyUI(
流动摄影(
标记$div（类='box body wrapper'，
标记$div（类='框体省略'，
文本输出（“文本1”）
)
),
标签$head（标签$style（HTML）
.箱体分区，.箱体h3，.箱体h6{
显示：内联；
填充：0.25em；
字号：1em；
垂直对齐：底部对齐；
}
.箱体{
宽度：计算（100%-70px）；
显示：内联；
}
.box-body.省略号{
显示：内联块；
空白：nowrap；
文本溢出：省略号；
}
.展开按钮{
光标：指针；
颜色：rgb（0，147，211）；
保证金：0；
显示：内联块；
垂直对齐：顶部；
}
"
))),
标签$head（标签$script（HTML(
“设置超时（函数（）{
var-boxBodyWrapper=document.querySelector（“.body-wrapper”）；
var-boxBody=document.querySelector（“.boxBody”）；
var myWidth=document.querySelector（'#text1'）；
if（myWidth.offsetWidth>boxBody.offsetWidth）{
boxBody.style.overflow='hidden'；
var expandButton=document.createElement（'div'）；
expandButton.innerText='Show All'；
expandButton.classList.add（'expand-button'）；
boxBodyWrapper.appendChild（展开按钮）；
让expandedButton=false；
expandButton.addEventListener(
'点击'，（）=>{
boxBody.classList.toggle（'elipsis'）；
expandedButton=！expandedButton；
（expandedButton）？（expandButton.innerText='Show Less'）：（expandButton.innerText='Show All'）；
}
)
}
}, 500)"
)))
)
),
服务器=功能（输入、输出、会话）{
输出$text1这将处理JS错误
uncaughttypeerror:无法读取（索引）处null的属性'offsetWidth'：46
谢谢@ThomasFuchs，这是否意味着我需要为Shining应用程序定义一个
偏移宽度
？我是HTML世界的初学者，如果你能为解决问题提供一些指导，那将是一个很大的帮助。再次感谢！我感谢你的帮助！