Detect iframe loaded

I am using the following to populate an element :slight_smile:

document.getElementById("cart").innerHTML = '<iframe src="" height="1000" width="100%"></iframe>';

The page takes a while to load so I need to do:

  1. play a busy animation.
  2. When the iframe is loaded hide the animation,

How do I detect when the iframe has loaded?


Steve Warby

onload-event can be used for iFrames, too … not shure if it’s 100% relyable.
take a googlesearch iFame onload javascript :slight_smile:

I see the unload function but as usually its a guessing game as to where to put it.

I added this to the scene’s on load event


Where does this need to go ?


Steve W

your iFrame needs an id, which will then be the target …

It has an ID of ‘cart’


Steve Warby

No, ‘cart’ is its parent Node in your example…

Thanks Hans,

I didn’t realise that.

I am now using :slight_smile:


and the element is using :slight_smile:

<iframe id="cart" src="" height="2000" width="100%" frameBorder="0"  ></iframe>

However I get the following error.

Error in cartLoaded: TypeError: null is not an object (evaluating 'document.getElementById('cart').onload=function(){console.log('loaded')}')

What am I doing wrong here ?


Steve Warby (23.2 KB)

If I use this in the element:

<iframe src="" id="cart" style="height:1000px" width="100%" frameBorder="0" ></iframe>
// set onload on element
document.getElementById('cart').onload = function() {
console.log('Frame element loaded')


It works.



Steve Warby

Is it because the iframe ‘cart’ has not been created on scene load ?

If so how do I approach this ?


Steve Warby

yes, the element has to exist before you can check for load.

I have added an animated gif with an ID of ‘busy’.
I have used the following within the element:

<iframe id="cart" src="" height="2000" width="100%" frameBorder="0" onload= "document.getElementById("busy").style.visibility = "hidden"" ></iframe>

The element ‘busy’ does not get hidden and I get an error in the console saying :slight_smile:
Unexpected Token }

The code on the Hide Anim button is

document.getElementById("busy").style.visibility = "hidden";

and this fires ok. (23.3 KB)

Any ideas what is wrong here guys?


Steve Warby

in this line too many double quotes. Try


I now get this error on the unload event

TypeError: null is not an object (evaluating 'document.getElementById('busy').style')

I have the same code on the ‘Hide Anim’ button and it works.

Does everything within the scene see all the ID’s. It looks like the HTML Widget is not ‘seeing’ the cart ID ???

Uploaded here

Very strange …


Steve Warby

Hi Steve

it’s because the element with ID “busy” is not inside the iFrame so when the javascript runs it’s looking for something that isn’t there (hence returning ‘null’). The javascript is running inside the iFrame and in order for it to communicate with it’s parent (the Hype document) you would have to add this.


note: using document alone is just referring to the iFrame.

1 Like

Cheers for that it works.

Onto the next phase.

I want to call an animation ( to hide the loading gif using a timeline) so is there a way to call a Hype Timeline from the element.

I would also like to know how to call my Hype javascript functions as well.

onload="parent.document.getElementById('busy').style.visibility='hidden' ; alert('test') ; parent.testMessage() "

The parent.testMessage() fails

What is the correct syntax please ?

Steve Warby

first of all you have to realise that calling the functions you write in Hype you have to use the method in Hype’s API to get an array of functions and then call the specific function with the following syntax

(link in documentation:


however accessing hypeDocument is more difficult when trying to do it from an iFrame (HTML widget)
as the iFrame won’t know what hypeDocument is referring to (undefined)

I tend to use global variables that store anonymous functions to use throughout my document and I store these in a Hype function I call on scene load. e.g:

window.myFunc = function () {
    alert('test message');

This way I can just call “parent.myFunc()” if I want to use this particular function.

1 Like

That worked.


Steve Warby