如何禁用Google幻灯片演示文稿IFrame导航

Question

我正在一个网站上工作,我正在使用演示文稿作为音乐会图像的幻灯片,因为对于那些没有编程精通的编辑幻灯片显示内容的人来说,这很容易和熟悉.要隐藏我使用CSS的导航,并将IFrame放在带有.googleSlideshow类的div中.

HTML:

<div class="googleSlideshow">
<iframe src="https://docs.google.com/presentation/d/bL4rGh0Nk/embed?start=true&loop=true&delayms=5000" frameborder="0" width="450" height="550" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe>
</div>

CSS:

.googleSlideshow{
 width:100%;
 height:550px;
 overflow:hidden;
}
.googleSlideshow iframe{
 width:450px! important;
 height:calc(100% + 29px);
}

够容易!问题出现了:当点击IFrame时,演示文稿会转到下一张幻灯片并暂停!这很糟糕,因为这是在IFrame中,IFrame的组件不能通过我的CSS或脚本来实现.是否有可以添加到IFrame的属性,该属性将传递到演示文稿并停止图像onclick导航？

Answer 1

添加rm = minimal

<iframe src="https://docs.google.com/presentation/d/bL4rGh0Nk/embed?start=true&loop=true&delayms=5000&rm=minimal" frameborder="0" width="450" height="550" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe>

Answer 2

经过反复试验，我找到了解决办法！

HTML

<div class="googleSlideshow">
<iframe src="https://docs.google.com/presentation/d/bL4rGh0Nk/embed?start=true&loop=true&delayms=5000" frameborder="0" width="450" height="550" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe>
<div style="top:0px;left:0px;width:100%;height:579px;position:relative;margin-top:-583px;" onclick="return false;">
</div>
</div>

CSS

.googleSlideshow{
  width:100%;
  height:550px;
  overflow:hidden;
  position:relative;
}
.googleSlideshow iframe{
  width:450px! important;
  height:calc(100% + 29px);
}

用 div 阻止点击的想法是有效的，但是将其放在 iframe 之后，然后将其移动以覆盖 iframe 比将 div 放在 iframe 之前更好。我希望这可以帮助处于类似情况的其他人！