Reveal.js iframe 背景答案

【问题标题】：Reveal.js iframe backgroundReveal.js iframe 背景
【发布时间】：2014-05-11 20:41:43
【问题描述】：

我希望嵌入式 iframe 在reveal.js 演示文稿中全屏显示（或调整后的全屏百分比）。 This 讨论暗示我可以将 iframe 设置为背景，但这会返回默认背景：

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

我也尝试过将 iframe 放在一个具有类拉伸的 div 中，但它只占屏幕的百分比：

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

【问题讨论】：

标签： html css presentation reveal.js

【解决方案1】：

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

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

参考： https://github.com/hakimel/reveal.js/pull/1029

【讨论】：

有没有办法与后台 iframe 交互？
这是天才。非常好的功能。您可以像打开网站一样与 data-background-iframe 进行交互。然后继续您的演示文稿...

【解决方案2】：

回答有关与背景 iframe 交互的问题：

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

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

【讨论】：