1

我rmarkdown曾经使用slidy_presentation. 我想在显示幻灯片时执行一些 Javascript。在显示页面时触发了ioslides_presentation一个事件（请参阅在 ioslides 中显示幻灯片时的事件？），但我在 Slidy 中没有看到类似的内容。 slideenter

我可以检测是否正在显示特定幻灯片（通过查看它的类div），但我不知道如何触发代码来做到这一点。

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

4

1 回答 1

2

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

使用 MutationObserver

在下面的脚本中，我们使用MutationObserver（参见此处和此处）来观察标题元素内容的变化。有了标题，我们可以提取它的整数部分，它代表幻灯片编号。在此示例中，我们仅显示包含文本“当前幻灯片：”的警报，后跟我们提取的数字。

在此处输入图像描述

这是 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.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>过去、当前、下一张和远下一张幻灯片的几个元素。当前的幻灯片元素是具有 class 的元素current。所以我们只需在 forEach 循环中搜索该类并获取它的data-slide-num属性。

于 2017-03-18T11:37:36.740 回答