Persistent symbol with an iFrame inside

Have put an iFrame inside a persistent symbol. This persistent symbol is on 3 scenes.

My idea is that – what ever state the content of the iFrame has — that state should be unchanged when a scene switch happens.

However, the content of the iFrame gets reloaded between the scene changes.

Any ideas, hints?

Persistent symbols are actually persistent only for the Hype runtime but the HTML node is actually mode around … so third-party content most likely will be reinitialized as it is detached and reattached in the DOM.

The content of the iFrame is also a Hype document.
Guess it doesn’t help if there will be a detach/re-attach at scene changes.

That is right, why nest it in the first place?

Long story short… four demos built with Hype will be put in one package. The package contains a guide, that step by step present how to run the demos and what to say.

The ‘guide’ Hype document is the main one. The user always start there. Either to prepare or to run the demos in a sequence 1,2,3,4. (The guide elements can be turned on/off.)

Painted me into the corner of trying with iFrames within persistent symbols.

I see a way out by keeping all steps for the guide for a particular demo within one scene. More messy! Will not support keyboard navigation the way I want.

Importing a hypedoc by embedding the div and Script does Not Work? No iframe …iframes will reload when moved around …

Think there will an iFrame added in the generated script anyway…
…will try :slight_smile:

No iframe … Just Copy Paste the embedpart of the Exported html

For dynamic import: Structure Approach Suggestions
See my Posts …

Tried that.

Still, get an iFrame in the generated code if my Hype element types is ‘HTML widget’ with ‘Embedded HTML’… or…

…a Rectangle, with that div/‘js-inject script’ as innerHTML for the Rectangle. In this case; no visible result, no errors in Safari, Firefox, Chrome – on a Mac.

Have seen a post from @MarkHunte
…concluding you get an iFrame however you turn yourself around. Some time ago.

You won’t get an iframe …
Be Sure to use an absolute URL for the Scripttage

Aha… an absolute URL… think that will be very hard, considering how this will be distributed and run in different scenarios all over the world.

An iframe would have an absolute URL too?! :crazy_face: Anyway the URL should Work from where ist’s called. So it does Not really to ne absolute …

Will try again tomorrow…

@MaxZieb, @h_classen, @MarkHunte
@jonathan

In this particular case… other cases…
will not take the path of injecting code at runtime.

A thought for future Hype PRO features;
Hype [micro] documents within Hype documents,
without too much of coding, or no coding at all

You May try my above mentioned Script :smile:

Doesn’t have to be messy - use symbols as mini-scenes.

As You do not describe what You want for keyboard navigation it is impossible to help at this point.

1 Like

Symbols are actually small Hype documents. And if you need to dynamically add complete Hype Documents try injecting them. Basic setup… just put the HTML you’d normally copy and paste into an innerHTML … from there you can tweak it to make it dynamic. But that has been solved by @h_classen.
But often it is good to try the simpler approach yourself first to understand what Hans has solved.

1 Like

This is correct; Persistent Symbols get moved from scene to scene, and thus their DOM parentage changes. Browsers have the behavior that they will reload iframes in this case. It can be demonstrated with code like:

<button onclick = "boxB.appendChild(myiframe)">Switch</button>

<div id = "boxA" style = "border: 1px solid; width: 320px; height: 180px">
	<iframe 
		id = "myiframe"
		src = "data:text/html;charset=utf-8,<script>document.write(Math.random());</script>">
	</iframe>
</div>

<div id = "boxB" style = "border: 1px solid; width: 320px; height: 180px">

</div>

A differing number means a reload has occurred.

I agree with the suggestions above that Symbols (and thus Persistent Symbols) are in general the use case for this feature. That said, organizationally I definitely understand that a full document can be better since it can have multiple scenes and can be easier to edit.

yes, full document would be nice :slight_smile:

@h_classen, have looked at the thread on structure approach. I don’t get how this would be helpful in my case.

Think I will solve it like this:
Skip the persistent symbol with an iFrame within it.
Just have an iFrame on those three scenes for that particular demo.

First scene: an animation will play within the iFrame and stop after 2 seconds.
The user should just do a click on a button within that that iFrame (the button doesn’t have a mouseOver or mouseDown visual change).

Will capture that click through an invisible element above the iFrame and when the click happens; move to next scene…
…where there is a screen capture of the state of the content in the iFrame when the first animation was stopped.
At scene two:
messages sent to the Hype document in the iFrame (a handfull of events to be triggered),
wait like 0.05 seconds and fade out the screen capture.
The effect will be: new animations played within the iFrame. Focus for interaction still at the main document. (Not within the iFrame.)

And for the last scene, same approach.

Keyboard navigation, ARROW UP/ARROW DOWN etc for moving between scenes in the main document, will work. I hope :slight_smile:

Will be five ‘demos’ to handle in this project.
For good and bad, the approach to solve the navigation, animations will be different for each one of them.

Aimed for a general mechanism, will not work the way I want.

1 Like

it would prevent you from using iFrames … and the problem of the iFrames reloading when within the persistent symbol … a communication between the hypedocuments with Hypes API would also be easy. But any solution that you feel confident with and fits your needs is a good one :slight_smile: