当前位置: 动力学知识库 > 问答 > 编程问答 >

html - How to disable Google Slides presentation IFrame navigation

问题描述:

I'm working on a website and am using a presentation as a slideshow for concert images because it is easy and familiar for someone who is not programmatic proficient to edit what is shown during the slideshow. To hide the navigation i used CSS, and placed the IFrame in a div with the class .googleSlideshow.

The 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>

The CSS:

.googleSlideshow{

width:100%;

height:550px;

overflow:hidden;

}

.googleSlideshow iframe{

width:450px! important;

height:calc(100% + 29px);

}

easy enough! here comes the problem: when the IFrame is clicked, the presentation goes to the next slide and pauses! This is terrible, and since this is in an IFrame the components of the IFrame are not able to be effected by my CSS, or script. Is there an attribute I can add to the IFrame that will get passed down to the presentation and stop the image onclick navigation?

网友答案:

I have found a fix thanks to trial and error!

the 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>

the CSS

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

the idea of a div blocking the click is what worked, but putting it after the iframe and then moving it to cover the iframe was better than placing the div before the iframe. i hope this helps others in a similar situation!

分享给朋友:
您可能感兴趣的文章:
随机阅读: