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 
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?! 
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 
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
@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
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 
Sounds very good!
Will give it another try…
Have read the structure approach thread several times. Don’t get how a simple example of ‘inject code’ at runtime would be.
Once it works, get the idea with HypeGlobalBehaviour.js from @MaxZieb
Attached, a small test project.
In the document main.hype, the last scene contains a simple test.
Keyboard arrow keys are used to navigate between the scenes in the main document. If the embedded document ‘contentA’ gets input focus, a click in the dark surrounding area will give focus back to the main document, for keyboard navigation. (That issue I think I know how to get rid of once everything else works as wanted.)iFrameTests.zip (697.1 KB)
@h_classen I found a couple of lines of javascript in a document you have uploaded! Thanks!!
Managed to get it to work. Almost…
Now have a persistent symbol, it gets injected code and displays another Hype document without an iFrame involved. The Hype document within the persistent symbol keeps it state, regardless of what scene it is on in the main Hype document.
However, elements in the main document disappears when scene changes happens in the main document.
My feeling: something is wrong with paths/contexts for the autogenerated Hype javascripts…
…or is there some kind of conflict with two HYPE-664.full.min.js ?…
…auto generated unique ids not unique…
…something missing…
On Symbol Load for the persistent symbol:
(seems to happen only once, as wanted)
function embedHypdeDocumentA(hypeDcument, element, event) {
var htmlText = '<div id="contenta_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;"></div>';
var scriptSrc = 'contentA/contentA.hyperesources/contenta_hype_generated_script.js?49003';
var hypeImportElement = document.getElementsByClassName("containerA")[0];
const documentFragment = document.createDocumentFragment();
const documentFragmentRoot = document.createElement("html");
documentFragment.appendChild(documentFragmentRoot);
documentFragmentRoot.innerHTML = htmlText;
const hypeDivElement = documentFragmentRoot.querySelector(".HYPE_document");
let newScriptTag = document.createElement("script");
newScriptTag.src = scriptSrc;
newScriptTag.type = "text/javascript";
newScriptTag.charset = "utf-8";
hypeDivElement.appendChild(newScriptTag);
hypeImportElement.appendChild(hypeDivElement);
}
One more thing, as long as input focus is on the main Hype document, keyboard navigation UP/DOWN arrow can be used to navigate between scenes in the main document.
So… the ‘sub’ document can be set to e.g. scene 2 by using the Next button within the white area…
…and the main document set to e.g. scene 3. As this doesn’t work correctly for the moment with the buttons, it works by using the keyboard e.g. DOWN Arrow. To be sure to have the right input focus, click once in the dark grey area before hitting the arrow key.
Attached, my test project for this.
Help needed…
I think by taking a look in main.hype it is quite clear how this is constructed.
If I can ge this to work, next. step try to use HypeGlobalBehaviour from @MaxZieb.
injectTest.zip (741.4 KB)