Support for iframes?

[ondrejsevcik]

Hello, is there a way how to setup hopscotch that will support iframes within iframes?

I have a page with multiple iframes and each iframe sometimes contains another iframe. (I know that this is not popular implementation of website app but it's a large project that I cannot rewrite right now). I want to write hopscotch tutorial, but I don't know how to make it work. Is it possible right now? Thanks

[k10world]

Hmm.... interesting. It sounds challenging. Hopscotch is self-contained and available within the window context. So I'm thinking that you will have to break tours/steps down by iframe? Just thinking out loud.

[ondrejsevcik]

Yeah, I had a same idea and now I'm trying to make it work. If I find solution I will post it. Meanwhile any other ideas are welcomed :)

[timlindvall]

Yeah, I think the way you'd have to go about this is have each iframe own its particular part of the tour. So, if the iframe had steps 2 and 3 and the main page had steps 1, 4, and 5...

• Step 1 would be a 1-step tour with an onEnd callback that tells the inner iframe to start its tour.
• Steps 2 and 3 are their own tour (add a dummy step for step 1 that points to nothing and turn off the feature that changes step number for missing steps), which has an onEnd callback that calls the parent to start a third tour.
• Steps 4 and 5 is its own tour (w/ dummy steps for 1-3).
• Caveats about cross-domain communication apply (they're not allowed).

Perhaps a lot of this messiness could be wrapped away in a plugin (when we have plugins) that handles communication across iframes for you. So, not core functionality (this seems like it would only apply to particular use cases), but let's add this as a plugin candidate.

[ondrejsevcik]

I did it this way and it worked. But it's hard to maintain. You need to synchronize step configuration in each frame. So plugin would be helpful :+1:

[barsukov]

It would be great to have this function and it is hard to implement by yourself: I have a case when I need to use the multiple iframe during the tour.

And it can be easy resolve if hopscotch support something like container field which I can easily use in my rendering jobs

First step in one container the second in another one.

What do you think for?