Detect iframe loaded

Using JavaScript with Hype
1

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

document.getElementById("cart").innerHTML = '<iframe src="http://www.toolfolks.com/cart/index.php?route=product/search&search=dewalt" 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?

Cheers

Steve Warby

2

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

3

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

document.getElementById("cart").onload=function(){alert('loaded'};

Where does this need to go ?

Cheers

Steve W

4

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

5

Hi
It has an ID of ‘cart’

Cheers

Steve Warby

6

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

7

Thanks Hans,

I didn’t realise that.

I am now using :slight_smile:

//document.getElementById("cart").onload=function(){alert('loaded')};
document.getElementById('cart').onload=function(){console.log('loaded')};

and the element is using :slight_smile:

<iframe id="cart" src="http://www.toolfolks.com/cart/index.php?route=product/search&search=dcn" 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 ?

Cheers

Steve Warby

iframeTest.hype.zip (23.2 KB)

8

If I use this in the element:

<iframe src="http://www.toolfolks.com/cart/index.php?route=product/search&search=dcn" id="cart" style="height:1000px" width="100%" frameBorder="0" ></iframe>
<script>
// set onload on element
document.getElementById('cart').onload = function() {
console.log('Frame element loaded')
  }


</script>

It works.

???

Cheers

Steve Warby

9

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

If so how do I approach this ?

Cheers

Steve Warby

10

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

11

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

<iframe id="cart" src="http://www.toolfolks.com/cart/index.php?route=product/search&search=dcn" 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.

iframeTest.hype.zip (23.3 KB)

Any ideas what is wrong here guys?

Cheers

Steve Warby

12

in this line too many double quotes. Try

onload="document.getElementById('busy').style.visibility='hidden'"
13

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 testCart

Very strange ....

Cheers

Steve Warby

14

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.

parent.document.getElementById('busy').style......

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

1 Like
15

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 ?

Cheers
Steve Warby

16

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: http://tumult.com/hype/documentation/3.0/#functions)

hypeDocument.functions().myFunc()

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
17

That worked.

Cheers

Steve Warby