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

Using JavaScript with Hype
4

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.