如何检测 Slidy 中的幻灯片变化？

Question

我使用 rmarkdown 使用 slidy_presentation 制作 Slidy 幻灯片放映。我想在显示幻灯片时执行一些 Javascript。在 ioslides_presentation 中，显示页面时会触发 slideenter 事件（请参阅 Event when slide is displayed in ioslides?），但我在 Slidy 中没有看到类似的情况。

我可以检测是否正在显示特定幻灯片（通过查看其 div 的 class），但我不知道如何触发代码来执行此操作。

有什么方法可以检测到幻灯片发生变化吗？

Answer 1

我做了一些研究，发现了一个关于如何检测当前显示的幻灯片的简单技巧：

使用 MutationObserver

在下面的脚本中我们使用了一个MutationObserver（参见here and here）来观察标题元素内容的变化。有了标题，我们可以提取它的整数部分，它代表幻灯片编号。在此示例中，我们仅显示一个警报，其中包含文本 "Current Slide: "，后跟我们提取的数字。

这是 JavaScript 片段：

<script>
var target = document.querySelector('head > title');
var observer = new window.WebKitMutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        var title   = mutation.target.textContent;
        var current = +title.toString().match(/\d+/g);
        alert('Current Slide: ' + current);
    });
});
observer.observe(target, { subtree: true, characterData: true, childList: true });
</script>

由于我们不希望将片段解释为幻灯片本身的内容，因此我们通过 YAML header 将其包含在内。检查下面的可重现示例，其中 header.html 仅包含上面的 javascript 片段：

MRE:

---
title: "Untitled"
author: "Martin Schmelzer"
date: "18 3 2017"
output: 
  slidy_presentation:
    includes:
      in_header: header.html
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

## R Markdown

Slide 2 (Title slide is #1!)

## Slide with Bullets

This is slide 3!

## Slide with R Output

...and number 4!

编辑：修改后的 ioslides 脚本

如果在 ioslides 中有某种需要，您可以按以下方式修改 JavaScript 片段：

<script>
$(document).ready(function() {
  var target = document.querySelector('slides');
  var observer = new window.WebKitMutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if(mutation.target.getAttribute('class').indexOf('current') != -1 ) {
          alert(mutation.target.getAttribute('data-slide-num'));
      }
    });
  });
  observer.observe(target, { subtree: true, attributes: true});
});
</script>

在 slidy 中，每张幻灯片都包含自己的 div 容器。 ioslides 中的方法不同。这里我们只有几个 <slide> 元素用于过去、当前、下一张和 far-next 幻灯片。当前幻灯片元素是具有 class current 的元素。所以我们只需在 forEach 循环中搜索 class 并获取它的 data-slide-num 属性。

如何检测 Slidy 中的幻灯片变化？

How to detect a slide change in Slidy?

knitr

r-markdown

mutation-observers

slidy

使用 MutationObserver

MRE:

编辑：修改后的 ioslides 脚本