Tuesday, 17 August 2021

Embedding a google presentation inside html + clicking next slide from JS

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

<iframe src="https://docs.google.com/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?



from Embedding a google presentation inside html + clicking next slide from JS

No comments:

Post a Comment