How to Load and Unload (or Reset) Embedded Hype Widgets

Using JavaScript with Hype
2

The main problem is that the viewport is to the "document" so while it would be intuitive you could set the waypoint on the child, that won't work. Maybe there will be a way to get that in the future.

So that would leave the option of reloading the URL (which still would require javascript), or communicating to the iframe via postmessage.

Actually the idea of channeling a custom behavior through an iframe sounds pretty useful. Here's some code for you:

On the child side, simply add this to the Head HTML:

	<script>
	
	function documentLoadedCallback(hypeDocument, element, event) {
		// create a handler for messages
		var postMessageHandler = (function (event) {
			try {
				// we expect it to be in a specific record format
				var info = JSON.parse(event.data);
				if(info.type == "trigger") {
					// if it is a trigger, then use the customBehaviorName field
					hypeDocument.triggerCustomBehaviorNamed(info.customBehaviorName);
				}
			} catch (exception) {
				console.log(exception);
			}
		});
	
		// add listeners for postmessage
		if(window.addEventListener) {
			window.addEventListener("message", postMessageHandler, false);
		} else {
			window.attachEvent("onmessage", postMessageHandler);
		}

		return true;
	}
	
	// setup the postmessage listener once when this document loads
	if("HYPE_eventListeners" in window === false) {
		window.HYPE_eventListeners = Array();
	}
	window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":documentLoadedCallback});
	
	</script>

And then on the on enter viewport action for the iframe element, add this code for a run javascript action (changing the customBehaviorName to whatever in the child you want to respond to):

	// name of custom behavior to trigger
	var customBehaviorName = "resetMainTimeline";
	
	// convert to a specific format that will be parsed by the child
	var data = JSON.stringify({ type: "trigger", customBehaviorName: customBehaviorName });
	
	// search only the element that triggered it, but if there's no specific element use the document scope
	var parentElement = element;
	if(parentElement == null) {
		parentElement = document;
	}
	
	// find the actual iframe element
	var iframes = element.getElementsByTagName("iframe");
	for(var i = 0; i < iframes.length; i++) {
		// communicate to the child
		iframes[i].contentWindow.postMessage(data, "*");
	}
1 Like