Access child HTML widget/iframe content from Hype doc parent?


(Markus) #1

Hi Guys,

I am thinking of building out a prototype in Hype and adding some ‘Framer JS’ prototypes inside a HTML widget. I’m not a Javascript/web expert but I can handle basic Javascript, HTML and CSS.

The scenario is to create pre-selected drop downs/menus/choices for a eCommerce website list page containing clothing products in many colours with a variety of search options. Using Hype I would animate pre-selected options and then when a User selects that pre-selection it communicates with the Framer prototype by sending a onChanged event or changing a property on the window?

I’m trying to research how I would do this, and how hard/complex it is to get selections updating between the Hype document and Framer. Can you give me some ideas of ‘terms’ I should be looking for as I research how to do it? And if you have code snippets to help me understand what it might look like, that would be great.

I don’t think this question has been asked somewhere else, or at least if it was I couldn’t understand the answer - so I’m asking here instead!


(Markus) #2

I’m going to collect my research contents here for future reference. I may not actually NEED all of these things but they all seem to be connected.

http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage
http://vistaprint.github.io/SkinnyJS/jquery.postMessage.html

Please do give me any clues or helpful tips and let me know if I’m researching the wrong thing?


(Jonathan Deutsch) #3

I’m not an expert on Framer, but if you’re using iframes then postmessage is generally the way to go! So you’re researching the right things. There are some posts on our older forums about using postmessage like:

http://hype.desk.com/customer/portal/questions/9105075-control-hype-document-timeline-from-an-embeded-site-in-an-html-widget