Change Scene from external javascript

Hi everyone,

I want to change the Scene of my Project when the .onended function of my counter script runs.

counter.onended = function() { 



Is this even possible from an external script (inside resources folder).

best regards,

Yes. If you open console you can actually inspect the object HYPE.documents. it contains all documents on the webpage as a reference by document name so HYPE.documents['your_document_name'].showSceneNamed('scene2'); can be invoked.

1 Like

Thank you for your quick answer!

Unfortunately i dont get it to work…

counter.onended = function() {

Is there a way to call a custom behaviour in that function in order to change the szene and/or start timeline.

You most certainly can also use Global Behavior an extension and invoke
HypeGlobalBehavior.triggerCustomBehaviorNamed('nextScene'); and then listen to '#nextScene' to fire the action.

But actually the HYPE.documents['your_document_name'].showSceneNamed('scene2'); should work… I am guessing you got the document name wrong. You can get the name when looking into the console and inspecting HYPE.documents on your preview just type Object.keys(HYPE.documents) OR by running alert(hypeDocument.documentName()); from anywhere inside your Hype document functions.

If you are sure you got the name right then the scope of your callback could be the issue. Meaning that this is not a synonym for window and then you would need to use window.HYPE.documents['your_document_name'].showSceneNamed('scene2');

Thank you again for your answers!

Checked the documents name.

I get an error in the console when the function is run:

 ReferenceError: HYPE is not defined
at Object.counter.onended (iframe-htmlwidget.html:129)

Any thoughts on this?

Could it be that your not working in the regular preview? If this is a iFrame / custom setup you can use Global Behavior or please share your document. Looking at your error I think this is Duo to the HTML-Widget your using that relies on frames. Using frames involves Sandboxing rules and accessing parent/child window objects and leaves me guessing…
If you got some code in a html widget consider moving it into a regular doc instead.
Or use window.parent.HYPE.documents['your_document_name'].showSceneNamed(...)


Yes, I think thats is the Problem. The Script is running in an HTML Widget (IFrame).
Is there an other way to implement html into a Hype Scene? Because adding it to an rectangle doesnt work.

You said " moving it into a Regular Doc". How can i do this? Sorry never heard of that workaround.

It’s working for me… (23,5 KB)

1 Like

Just to chime in a little:

This is likely because the call isn't preceded with calling the parent; @MaxZieb has the later example that works in an HTML Widget (iframe):


But if you are not in an iframe but instead say the Inner HTML of a Rectangle, then HYPE is in the current window (and not the parent), so you'd use:


But the other thing I really wanted to mention is that "index" in this case is always used for Preview, but at export the document name is based on the name used for the export, and so will likely be different unless you called your export "index". So just note you may have to change this before going live.


Thank you @jonathan & @MaxZieb ! :grinning:

The solution with
worked perfectly.

@jonathan Yes i have noticed thisin the past. Thank you for pointing that out!

1 Like

Is there a way to include Scene Transitions?
Tried it with

window.parent.HYPE.documents['index'].showSceneNamed('Start', kSceneTransitionCrossfade, 1.1);

but that did not work. Any ides?

Thank you!

please have a look in above link to the documentation. the scenetransition-constant requires a reference to the hypedocument too …

Along with @h_classen’s feedback, I’ll also point out that it looks like your code may be using smart/curly quotes instead of the syntactically correct tick ' mark. A correct version would probably look something like:

window.parent.HYPE.documents['index'].showSceneNamed('Start', window.parent.HYPE.documents['index'].kSceneTransitionCrossfade, 1.1);

Or simplified to:

var hypeDocument = window.parent.HYPE.documents['index'];

hypeDocument.showSceneNamed('Start', hypeDocument.kSceneTransitionCrossfade, 1.1);