Get the slide number from iframe

[pplonski]

Hi!

I'm working on a framework for making the interactive web apps from Jupyter Notebooks.

There is an option in Jupyter Notebook to create slides. I would like to add interactive slides to my framework. Use have widgets that can tweak, and execute the notebook to produce slides.

I'm using nbconvert to create slides HTML file. It is served in the framework in the iframe. During navigation between slides I don't see updates in the URL. If user will change some widgets values I would like to show the recomputed presentation on the same slide number.

Is there any way to get the slide number from the iframe?

Or should I try to other way to serve slides from Jupyter to be able to get the slider number.

[hakimel]

Hey! If the iframe lives on the same origin as the parent page you can fetch the current iframe hash like this:

const iframeElement = document.querySelector( '<CSS selector for your iframe element>' )
const hash = iframeElement.contentWindow.location.hash;

That will give you the URL hash for the current slide, for example `#/1'. You can use that to navigate back to the same slide.

Alternatively you can call reveal.js directly to get the current slide index as an object:

iframeElement.contentWindow.Reveal.getIndices() // {indexh: 1, indexv: 0}

If the iframe doesn't live on the same origin you'll need to use the reveal.js postMessage API.

Hope that helps!

[pplonski]

thank you @hakimel! The trick with location.hash works!

I've created a screenshot from dev version of how it will look like, you will be able to tweak widgets values and execute the presentation with new values (computational presentations)