Reveal.js iframe背景

Question

我想要一个嵌入式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> 

Answer 1

要回答你的问题有关的背景I帧交互：

使用上reveal.js的Dev分支获取数据背景的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

Answer 2

或许你已经想通了，这是似乎是最近有所改善：

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

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