Control a timeline from an external HTML ( communicating between iframes )

I have 2 hype documents with 1 scene each one.

The first document have 2 timelines, the main one (that does nothing) and a second one that triggers an animation, there is also a Javascript that play the timeline and looks like this:

hypeDocument.startTimelineNamed('timeline', hypeDocument.kDirectionForward)

that works just fine, within that document there is an iframe wich contains the second document that have the “PLAY” button, that button triggers this javascrip for trying to control the timeline that has the animation in the first document:

HYPE.documents['document1'].startTimelineNamed('timeline',),HYPE.documents['document1'].kDirectionForward); 

and that of course doesnt work, both document have been exported to html and placed under the same directory in the server.

so, is there any way of controling the animation timeline from a control within an iframe…

Help me Tumult-Guys Kenobis, You´re my last hope.

1 Like

I think the iFrame is a bad idea. Do you have Hype Pro? A Symbol seems to be a much better way to manage this problem.

If you’re using iframes, then you cannot communicate directly from one frame to the other. This is because of the security model of iframes - it makes things unfortunately complicated but prevents content outside of your control (think an ad) from looking at other aspects of the page. The typical technique is to use postMessage, and then each frame needs to manage what it is doing.

There’s a post from our older forums that talks a little bit more about this:
https://hype.desk.com/customer/portal/questions/9105075-control-hype-document-timeline-from-an-embeded-site-in-an-html-widget

Here’s the suggestion posted by @ryan in that thread:

They all refer to message passing as that’s the only reliable and supported way browsers allow iframes to communicate with their parent page. Thus, that’s the only way for the content in your HTML Widget – which is really an iframe – to communicate with the Hype document which contains it.

To set up the appropriate communication channel, you’ll want to do something like the following:

  1. Add an On Scene Load action for the scene which contains your HTML Widget. Have this action run a JavaScript function.

  2. In the new JavaScript function, add code to the function:

    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
    
    // Listen to message from child window
    eventer(messageEvent,function(e) {
    var key = e.message ? "message" : "data";
    var data = e[key];
    
    // Run timeline based on message that was sent
    hypeDocument.startTimelineNamed(data, hypeDocument.kDirectionForward);
    },false); 
    
    
    

This code sets up a message listener on your scene that can receive messages from the HTML Widget and will run the timeline that has the same name as the message that was passed to the window.

  1. Now the page in your iframe needs to actually send messages. To do this, you’ll want to run JavaScript similar to the following:

parent.postMessage("1", "*");

Note that I’m passing a number as the message; this number corresponds to the timeline you wish to have played, as you noted in your first post.

I cannot seem to get this to work properly.

I have a similar situation as arturohernandez, in that I have a hype file that contains an iframe. I am loading another hype file into that iframe and I need to be able to control the child timeline with a pause/play button located in the parent file.

I currently have a click function (on the parent button) where I am attempting to make my connection to the child timeline.

Here is an example:

iFrame communication.zip (220.9 KB)

4 Likes

You sir, are my hero…