HYPE is not defined - calling Hype from external HTML


(Maciej) #1

Hello everyone,
I’ve been testing HYPE for some time now and pretty much the only issue I’m running into are external function calls.
When using callbacks everything is fine, but whenever I try to call a function that’s not a callback push I’m getting HYPE is not defined error and that’s that.
I’ve looked around the forums and it all comes down to example like this:


Problem is, no matter if I put it into a <href> inside index.html or into <script> in head, it’s still generating error that HYPE is not defined. I can’t really see any JS being loaded before that though so I guess it’s really not defined. Makes me think that maybe I’m doing something wrong, but I really can’t tell what. I would really appreciate any help at achieving my goal of controlling Hype from outside HTML.
If not asking for too much, if anyone would be interested in answering, could you please also think if such a call would be possible to push through an iFrame?
I have a dummy ad site in which I have multiple Hype documents sitting in iFrames and I’d like to pause and restart them at will. I’m currently making changes to them using jQuery .contents() but can’t really see that working for above example.

Thank you very much for any help you’ll be able to provide or even looking at this topic!
Have an excellent day

(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #2

At first I was wondering if something might be stoping the JavaScript from going through an iFrame. But apparently… http://www.dyn-web.com/tutorials/iframes/refs/iframe-iframe.php …it’s possible.

Perhaps Global Variables could be used? If all of the files are on the same domain, maybe it’s just a matter of using a JavaScript event to check for changes in global values. The main page sets the value, the Hype in the iFrame checks the value and changes the action accordingly.

This is theoretical. I haven’t tested this.

(Jonathan Deutsch) #3

The Hype runtime (which holds the HYPE variable with the documents) is loaded asynchronously/dynamically, so it is not available immediately. We do generate a notification when the document has loaded, so if you setup a handler correctly you can get at this. There’s a sample in the documentation invoking API from outside of Tumult Hype. Here’s a simplified version:


  function myCallback(hypeDocument, element, event) {

    // do something with hypeDocument...
    // HYPE.documents["documentName"] which is the same thing is also ready now

    return true;

  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});


As for using this with an iframe, that’s a whole other topic and dependent on your needs. There’s also a few posts on the forums and how to use postmessage to do communication between parent and child.