Advance a timeline from external URL in iFrame?


#1

New here and hoping someone can point me in the right direction… I’ve found a few similar questions, but am going round in circles trying various things that aren’t working.

I am creating a stand-alone presentation featuring a simple contact form. I’ve inserted an HTML Widget which loads the contact form (PHP, external URL) which is then processed and a response returned in the Widget… all good.

Once the form is processed, I simply want to be able to advance the timeline in the presentation, but I can’t figure out how to get this to work… can someone please explain how to call my advanceTimeline(); custom javascript function from the external URL loaded in the iFrame, or is this simply not possible? My latest error is “Uncaught DOMException: Blocked a frame with origin… from accessing a cross-origin frame…”

I’d really appreciate if someone can help me get this to work, or show me the correct way to go about this…


(Jonathan Deutsch) #2

It might be useful if you could share a zip of your .hype document; this would help reproduce the error and also better understand your setup. I’m going to assume you just need to call a function made within the Hype document from an HTML Widget element. The most basic way would be to call into a parent like:

parent.window.HYPE.documents["index"].functions().untitledFunction();

(“index” may need to be changed in your case)

However, this probably won’t work if your HTML Widget is on a different domain than the parent HTML page. If you intend both will be using the same domain name/web server, then you can probably upload your document and see if the error goes away.

If they will be on different domains then you’ll need to use the postMessage method to communicate information between iframes. This is a bit more complex of code; there’s a couple solutions I’ve seen in the past that could be adapted to work for you:



Listen to click on link
#3

Thanks Jonathan – much appreciated as I have got a working solution using the postMessage method :slight_smile:

I had already tried this method and couldn’t seem to get it to work so kept going round in circles trying other things! However I have discovered that it doesn’t work when ‘previewing’ the document, only when exported first and then opened in a browser… probably another newbie mistake!


(Jonathan Deutsch) #4

I’m glad you were able to get a postMessage solution working!

I wouldn’t really call this a newbie mistake - cross domain security policies trip up even experienced users, and it doesn’t help that browsers (at least last I checked) have slightly different things they allow from different domains so even when it is live may work differently on Chrome and Firefox. postMessage is the best way to avoid all these issues, though it is a bit more complex.


#5

Thanks Jonathan. Any idea why I was getting different results hitting the ‘preview in browser’ option in Hype, compared to exporting to a local folder and opening from there?


(Jonathan Deutsch) #6

If you were opening via the Finder (that is, getting a “file:///” URL) then that’s an entirely different security domain with its own policies as well!