Question

我希望在reveal.js演示文稿中将嵌入式iframe设置为全屏（或全屏的调整百分比）。 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>

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

Reveal.js iframe背景

2 个答案: