I have embedded a google presentation inside my web-app, using iframe.
<iframe src="https://docs.google.com/presentation/..." />
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?
Ok. I found an alternative solution – I am now using RevealJS. I can use their https://www.slides.com 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.