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:
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:
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.
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:
Add an On Scene Load action for the scene which contains your HTML Widget. Have this action run a JavaScript function.
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.
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 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.