Reveal.js фон iframe

Question

Я хочу, чтобы встроенный iframe был полноэкранным (или с процентным соотношением к полноэкранному режиму) в презентациикартике Discover.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

Чтобы ответить на ваш вопрос о взаимодействии с фоновыми фреймами:

Используйте ветвь dev на веб-сайтекартн.js, чтобы получить функцию data-background-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

Answer 2

Возможно, вы уже поняли это, похоже, это недавнее улучшение:

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

ссылка: https://github.com/hakimel/reveal.js/pull/1029