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