Reveal.js iframe 背景

Question

我希望在reveal.js演示文稿中，嵌入的iframe可以全屏显示（或者是调整后的百分比）。在这个讨论中，提到可以将iframe设置为背景，但实际上会返回默认的背景。请帮我解决这个问题。

<section data-background="http://viz.healthmetricsandevaluation.org/fgh">
</section>

我还尝试将iframe放在一个类为stretch的div中，但它只占屏幕的一部分：

<div class = "stretch">
     <iframe width="100%" height="100%" src="http://viz.healthmetricsandevaluation.org/fgh"></iframe>
</div>

- mike

Answer 1

也许你已经发现了，这似乎是最近的改进：

<section data-background-iframe="https://github.com/hakimel/reveal.js">
</section>

reference: https://github.com/hakimel/reveal.js/pull/1029

- patrice

---

有没有办法与后台的iframe进行交互？ - mike

这太聪明了。非常好的功能。您可以像打开网站一样与数据背景iframe进行交互。然后继续您的演示... - reencode

Answer 2

关于与背景iframe交互的问题：

使用reveal.js的dev分支获取data-background-iframe功能。实现此小补丁以与iframes交互，直到类似功能合并。

function showSlide( slide ) {
    // ...

    if( background ) {
        // ...
        document.querySelector('.reveal > .backgrounds').style['z-index'] = 0;
        // ...
        if( background.hasAttribute( 'data-loaded' ) === false ) {
            // ...
            if( backgroundImage ) {
                // ...
            }
            // ...
           else if ( backgroundIframe ) {
               // ...
              document.querySelector('.reveal > .backgrounds').style['z-index'] = 1;
           }
       }
   }
}

明确一下，要添加的两行是：

document.querySelector('.reveal > .backgrounds').style['z-index'] = 0; // reset when not in iframe
document.querySelector('.reveal > .backgrounds').style['z-index'] = 1; // set when in iframe

参考链接：https://github.com/hakimel/reveal.js/pull/1029#issuecomment-65373274 这篇文章讨论如何在使用reveal.js库制作的幻灯片中添加自定义字体。具体方法是将所需字体文件放置在reveal.js根目录下的fonts文件夹中，并使用CSS指定字体路径即可。

- Al Johri