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

约翰娜森·拉尔斯

我正在一个网站上工作,并且正在将演示文稿用作音乐会图像的幻灯片放映,因为对于那些不具备程序设计能力的人来说,编辑幻灯片放映过程中显示的内容非常容易且熟悉。为了隐藏导航,我使用了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导航图像的属性?

约翰娜森·拉尔斯

由于反复试验,我找到了解决方法!

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阻止点击的想法是可行的,但是将div放置在iframe之后再移动以覆盖iframe比将div放置在iframe之前更好。我希望这可以帮助处于类似情况的其他人!

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

R循环生成slideify演示文稿中的幻灯片

来自分类Dev

将演示文稿幻灯片嵌入GitHub Wiki页面上

来自分类Dev

不要在闪亮/ rmarkdown的演示文稿中显示幻灯片编号?

来自分类Dev

使用C#将PowerPoint演示文稿的所有幻灯片放到宽屏模式

来自分类Dev

如何在Powerpoint或Google幻灯片中显示幻灯片演示文稿的高级概述

来自分类Dev

在VBA powerpoint中如何将新幻灯片添加到空白演示文稿

来自分类Dev

RMarkdown IO幻灯片演示文稿不再支持CSS文件中的背景图像

来自分类Dev

如何使用Open XML .net SDK将幻灯片编号添加到PowerPoint演示文稿中?

来自分类Dev

如何通过Google Apps脚本发布Google幻灯片演示文稿?

来自分类Dev

将超链接添加到Google幻灯片演示文稿中的表格单元格

来自分类Dev

在reval.js R Markdown演示文稿中更改标题幻灯片颜色

来自分类Dev

使用Google Apps脚本提取演示文稿中特定幻灯片的URL

来自分类Dev

幻灯片演示文稿中所有文本的getForegroundColor()返回空

来自分类Dev

是否可以在AppsScript中获取新鲜的Google幻灯片演示文稿数据?

来自分类Dev

从Access VBA打开PowerPoint演示文稿的特定幻灯片

来自分类Dev

在演示文稿文件中创建子幻灯片?

来自分类Dev

PowerPoint:在演示文稿中多次重复使用幻灯片

来自分类Dev

删除PowerPoint演示文稿中所有未使用的母版幻灯片

来自分类Dev

嵌入其他PowerPoint演示文稿中的幻灯片

来自分类Dev

在幻灯片模式下打开2个演示文稿

来自分类Dev

在Django项目中嵌入幻灯片共享演示文稿-生产中的空白页

来自分类Dev

将演示文稿幻灯片嵌入GitHub Wiki页面上

来自分类Dev

使用C#将PowerPoint演示文稿的所有幻灯片放到宽屏模式

来自分类Dev

如何在Powerpoint或Google幻灯片中显示幻灯片演示文稿的高级概述

来自分类Dev

不在演示文稿模式时,通过热键在幻灯片中选择幻灯片

来自分类Dev

如何将标题幻灯片插入PowerPoint演示文稿中?

来自分类Dev

如何修复PowerPoint 2016演示文稿中某些幻灯片的母版不匹配?

来自分类Dev

使用API从Google演示文稿中删除一张幻灯片

来自分类Dev

导出的 Google 幻灯片演示文稿不包括最近的更改

Related 相关文章

  1. 1

    R循环生成slideify演示文稿中的幻灯片

  2. 2

    将演示文稿幻灯片嵌入GitHub Wiki页面上

  3. 3

    不要在闪亮/ rmarkdown的演示文稿中显示幻灯片编号?

  4. 4

    使用C#将PowerPoint演示文稿的所有幻灯片放到宽屏模式

  5. 5

    如何在Powerpoint或Google幻灯片中显示幻灯片演示文稿的高级概述

  6. 6

    在VBA powerpoint中如何将新幻灯片添加到空白演示文稿

  7. 7

    RMarkdown IO幻灯片演示文稿不再支持CSS文件中的背景图像

  8. 8

    如何使用Open XML .net SDK将幻灯片编号添加到PowerPoint演示文稿中?

  9. 9

    如何通过Google Apps脚本发布Google幻灯片演示文稿?

  10. 10

    将超链接添加到Google幻灯片演示文稿中的表格单元格

  11. 11

    在reval.js R Markdown演示文稿中更改标题幻灯片颜色

  12. 12

    使用Google Apps脚本提取演示文稿中特定幻灯片的URL

  13. 13

    幻灯片演示文稿中所有文本的getForegroundColor()返回空

  14. 14

    是否可以在AppsScript中获取新鲜的Google幻灯片演示文稿数据?

  15. 15

    从Access VBA打开PowerPoint演示文稿的特定幻灯片

  16. 16

    在演示文稿文件中创建子幻灯片?

  17. 17

    PowerPoint:在演示文稿中多次重复使用幻灯片

  18. 18

    删除PowerPoint演示文稿中所有未使用的母版幻灯片

  19. 19

    嵌入其他PowerPoint演示文稿中的幻灯片

  20. 20

    在幻灯片模式下打开2个演示文稿

  21. 21

    在Django项目中嵌入幻灯片共享演示文稿-生产中的空白页

  22. 22

    将演示文稿幻灯片嵌入GitHub Wiki页面上

  23. 23

    使用C#将PowerPoint演示文稿的所有幻灯片放到宽屏模式

  24. 24

    如何在Powerpoint或Google幻灯片中显示幻灯片演示文稿的高级概述

  25. 25

    不在演示文稿模式时,通过热键在幻灯片中选择幻灯片

  26. 26

    如何将标题幻灯片插入PowerPoint演示文稿中?

  27. 27

    如何修复PowerPoint 2016演示文稿中某些幻灯片的母版不匹配?

  28. 28

    使用API从Google演示文稿中删除一张幻灯片

  29. 29

    导出的 Google 幻灯片演示文稿不包括最近的更改

热门标签

归档