Reveal.js iframe background

Question

我想要一个嵌入式iframe是全屏(或全屏的调整百分比)在一个显示。js。这个讨论意味着我可以将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>

Answer 1

也许你已经明白了，这似乎是最近的改进:

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

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

Answer 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