[英]Reveal.js iframe background
I want an embedded iframe to be full screen (or an adjusted percentage of the full screen) in a reveal.js presentation. 我希望在reveal.js演示文稿中将嵌入式iframe设置为全屏(或全屏的调整百分比)。 This discussion implies that I can set the iframe as a background, but this returns the default background:
这个讨论暗示我可以将iframe设置为背景,但这会返回默认背景:
<section data-background="http://viz.healthmetricsandevaluation.org/fgh">
</section>
I have also tried putting the iframe in a div with class stretch, but it only takes up a percentage of the screen: 我也尝试将iframe放在带有类拉伸的div中,但它只占屏幕的一定百分比:
<div class = "stretch">
<iframe width="100%" height="100%" src="http://viz.healthmetricsandevaluation.org/fgh"></iframe>
</div>
perhaps you already figured it out, it's seem to be recent improvement: 也许你已经弄清楚了,这似乎是最近的进步:
<section data-background-iframe="https://github.com/hakimel/reveal.js">
</section>
reference: https://github.com/hakimel/reveal.js/pull/1029 参考: https : //github.com/hakimel/reveal.js/pull/1029
To answer your question about interacting with the background iframes: 要回答有关与背景iframe交互的问题,请执行以下操作:
Use the dev branch on reveal.js to get the data-background-iframe feature. 使用reveal.js上的dev分支来获取data-background-iframe功能。 Implement this small patch to interact with the iframes until something similar gets merged in.
实现这个小补丁以与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;
}
}
}
}
To be clear, the two lines being added are: 需要说明的是,添加的两行是:
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
reference: https://github.com/hakimel/reveal.js/pull/1029#issuecomment-65373274 参考: https : //github.com/hakimel/reveal.js/pull/1029#issuecomment-65373274
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.