在 rmarkdown 中使用 htmlwidgets 和revealjs答案

【问题标题】：Use htmlwidgets with revealjs in rmarkdown在 rmarkdown 中使用 htmlwidgets 和revealjs
【发布时间】：2020-02-02 22:19:42
【问题描述】：

我正在使用revealjs_presentation 格式的Rmarkdown 工作，我想包含一个由leaflet 创建的html 小部件。我天真地尝试将它包含在幻灯片中，知道可能会在reveal.js css和传单之间存在冲突，就是这种情况。正如您在以下屏幕截图中看到的那样，我的传单地图上有一些未知的黑线。

---
title: "Untitled"
output:
  revealjs::revealjs_presentation:
    self_contained: false
---

## Slide with a widget

```{r, echo=FALSE}
library(leaflet)
library(magrittr)
leaflet() %>%
  addTiles()
```

但请注意，此时，如果屏幕大小发生变化，小部件将正确调整大小。

我认为将传单小部件封装在 iframe 中可能会解决我的奇怪黑线问题，因为它们可能是由reveal.js 本身创建的（不会加载到 iframe 中）。

有效地解决了黑线的问题，但不幸的是，小部件这次不会调整到窗口大小。我想这是由于 iframe 在屏幕尺寸发生变化时被调整大小，而不是 iframe 内的小部件。

---
title: "Untitled"
output:
  revealjs::revealjs_presentation:
    self_contained: false
---

## Slide with a widget

```{r, echo=FALSE}
library(leaflet)
library(magrittr)
library(widgetframe)
frameWidget({leaflet() %>%
  addTiles()
})
```

最终效果是，如果在我的笔记本电脑上创建幻灯片并将它们显示在我的笔记本电脑上，使用 iframe 可以正常工作，但如果我想在投影仪上投影我的幻灯片，那么小部件对于（新调整大小的）iframe，这会导致 iframe 的未使用部分出现白色填充。

欢迎任何解决我的问题的方法。我猜有两种可能的方法是：

使用一些 CSS 技巧，而不是将传单地图封装在 iframe 中
使 iframe 内的小部件在调整 iframe 大小时调整大小

很遗憾，我无法同时完成这两种工作，这主要是由于我在 html/js/css 方面的（非常）非常有限的技能。我会尽快处理它们，但我现在需要你的帮助。

谢谢！

【问题讨论】：

标签： r iframe r-markdown reveal.js htmlwidgets

【解决方案1】：

我遇到了类似的问题，但通过将宽度调整为 100% 解决了这个问题。我将以下代码放在我的 .RMD 文件中（最后有效）：

<script>
  widg = document.getElementsByClassName('html-widget'); //find widgets
  for (let i = 0; i < widg.length; i++) { //loop through
    document.getElementsByClassName('leaflet')[i].style.width = '100%'; //adjust width
  }
</script>

这会循环遍历所有显示的 html 小部件对象并调整它们的宽度。

【讨论】：