javascript - Embedding a google presentation inside html + clicking next slide from JS - Stack Overflow

admin管理员组

文章数量:1406471

I have embedded a google presentation inside my web-app, using iframe.

<iframe src="/..." />

And that works and is great, but I am trying to programmatically (with JavaScript) to press next (when I need to go to the next slide). I want to be able to control when next is called based on my logic.

At first I tried doing that using:

let iframe = document.querySelector("iframe")
let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// get the next button's div
iframeDoc.querySelector(".punch-viewer-navbar-next").click()

But it failed on just let iframeDoc = iframe.contentDocument || iframe.contentWindow.document; because iframe limits you from accessing the content using JS if it's from another domain (I guess that's what happens in new chrome versions)

So I proxied my site and docs.google behind some port and then did a different iframe

<iframe src="https://localhost:7777/presentation/..." />

So I don't have an issue with making the above code run - but it has no effect - I see not result.

I guess I can continue and understand why div inside iframe click doesn't work (probably security issue), but this already sounds like a too cumbersome solution for what I need.

Do you know of any API or something that google presentation offers to help you do a simple next programmatically?

I have embedded a google presentation inside my web-app, using iframe.

<iframe src="https://docs.google./presentation/..." />

And that works and is great, but I am trying to programmatically (with JavaScript) to press next (when I need to go to the next slide). I want to be able to control when next is called based on my logic.

At first I tried doing that using:

let iframe = document.querySelector("iframe")
let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// get the next button's div
iframeDoc.querySelector(".punch-viewer-navbar-next").click()

But it failed on just let iframeDoc = iframe.contentDocument || iframe.contentWindow.document; because iframe limits you from accessing the content using JS if it's from another domain (I guess that's what happens in new chrome versions)

So I proxied my site and docs.google behind some port and then did a different iframe

<iframe src="https://localhost:7777/presentation/..." />

So I don't have an issue with making the above code run - but it has no effect - I see not result.

I guess I can continue and understand why div inside iframe click doesn't work (probably security issue), but this already sounds like a too cumbersome solution for what I need.

Do you know of any API or something that google presentation offers to help you do a simple next programmatically?

• javascript
• iframe
• google-slides

Share Improve this question Follow asked Aug 14, 2021 at 14:11 user967710user967710 2,00733 gold badges3636 silver badges6262 bronze badges 5

• 1 Potentially related to this question for iframe cross-origin issues. – Dane Brouwer Commented Aug 17, 2021 at 9:46
• I already took care of cross-origin issue with the proxy, so it's irrelevant – user967710 Commented Aug 17, 2021 at 21:00
• the next button is inside the slide or is it inside your website ? – Boudy hesham Commented Aug 19, 2021 at 0:49
• inside the slide – user967710 Commented Aug 19, 2021 at 11:09
• I have similar requirement, in which I want to control slide presentation from my custom app. Could you please share the details of the solution you found. Thanks! – Akash Ingle Commented Jun 8, 2022 at 8:49

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

I haven't seen anything resembling an API, but you can append the page number at the url you request to get a specific slide, for example https://docs.google./presentation/.../embed#slide=9 will show the 9th slide. So you can change the iframe src using javascript.

Warning: it re-downloads the whole slideshow every time you change this, so if you can find any other way to do this, it would probably be better.

Unfortunately I don't see a way to get feedback from the iframe on which slide is currently shown, so I would suggest hiding the controls with rm=minimal (https://docs.google./presentation/.../embed?rm=minimal#slide=9) and placing a mask over the iframe to stop the user from changing the slide outside your control.

Edit: You can also check this: https://developers.google./slides

if the next button is inside the presentation you can set a condition inside the setOnClickAction see the docs below it has wide range of methods and events just like js google AppScript

You can check the official REST API Google Presentations offer you in: https://developers.google./slides/api/reference/rest

The downside of it is the need to make authenticated requests

Ok. I found an alternative solution - I am now using RevealJS. I can use their https://www.slides. to create slides using a UI, then I download it as HTML and embed in my website.

It does require a $14 monthly subscription for their "PRO" but I ended up paying, just to be able to create slideshows that I can control when the next slide is used.

本文标签： javascriptEmbedding a google presentation inside htmlclicking next slide from JSStack Overflow