Access parent variable with hypeDocument in an iFrame?

Using JavaScript with Hype
1

Hi there,

I’m embedding my hype-animation (exported html-file) in an iframe. The html-file containing the iframe has a variable inside a -tag that I need to use in my hype-animation.

I have no idea how to target this variable from my hype-animation…in Adobe Edge Animate i used window.parent.variablename and everything was dandy, but this method didn’t work in Hype.

Can anyone tell my how I target a variable on the html-page, where my animation is embedded in an iframe (or object tag for that matter)?

2

This is a general need for webpages but not specifically HypeI but would suggest you look up postMessage in the search on the site. Or on Google.

To start you off here is one that allows the parent to post a message to the child iframe. You should be able to adapt the idea/code to what you need.

3

Thx for the fast reply, Mark!

I’m gonna look into this postMessage-thing, but for now I seem to have solved the problem in another way.

The problem comes down to security issues and the need to have both HTML-files on the same domain. I thought that running the files from the same folder on my harddrive would qualify the security-restrictions, but it only works when I upload the files to a server.

My solution was to store my variable in an hidden input-element in the HTML-file containing the iframe. This way I can call the id of the input-element from inside my Hype-animation with myVar = parent.document.getElementById(‘inputID’).value;

I’m sure there is a smarter way to do this (especially security-wise), but for this specific project this solution will do :slight_smile:

1 Like