Controling a website from an Hype-iframe

4

Certainly, Volker! Since both the menu built in Hype and the individual modules are hosted on the same server, this simplifies the process considerably. Here’s a step-by-step guide and a code example to help you achieve what you’re looking for:

Step 1: Define a Custom Behavior in Your Hype Document

  1. Open your Hype document.
  2. Go to the 'Scene Inspector' panel.
  3. Scroll down to the 'Behaviors' section.
  4. Click on the ‘+’ button to add a new behavior.
  5. Give your behavior a name, e.g., “TriggerFromIframe”.
  6. Define the actions you want this behavior to perform when triggered.

Step 2: Embed Your Hype Document as an Iframe

Embed the Hype document that you’ve just set up a custom behavior in, into your webpage as an iframe. Ensure that the id attribute of the iframe is set, as you will need this to reference it in your JavaScript code. For example:

<iframe id="hypeIframe" src="path_to_your_hype_document.html" width="100%" height="500px"></iframe>

Step 3: Write the JavaScript Function to Trigger the Custom Behavior

In your Hype menu document (the one that you’re using to create the menu), insert the following JavaScript function:

function triggerCustomBehaviorInIframe(hypeDocument, element, event) {
  var iframe = document.getElementById('hypeIframe');
  if (iframe && iframe.contentWindow.HYPE) {
    // Fetching the first Hype document within the iframe
    var firstKey = Object.keys(iframe.contentWindow.HYPE.documents)[0];
    
    // Triggering the custom behavior
    iframe.contentWindow.HYPE.documents[firstKey].triggerCustomBehaviorNamed('TriggerFromIframe');
  } else {
    console.error('Iframe or HYPE not found');
  }
}

Step 4: Attach the JavaScript Function to a Menu Item

  1. Select the menu item within your Hype menu document.
  2. Go to the 'Actions' panel.
  3. Add an ‘On Mouse Click’ action.
  4. Choose ‘Run JavaScript…’ and select the function you just created.

Step 5: Test Your Setup

Now, when you click the menu item in your Hype menu document, it should trigger the custom behavior in the Hype document embedded within the iframe.

Please ensure that both documents are served from the same domain and protocol to avoid any cross-origin issues. If everything is set up correctly, this should work seamlessly for you.

Alternatively you can use Hype Global Behavior and the entire process even works across domains

Let me know if you need a postmessage example.

1 Like