Detect iframe loaded


(Steve Warby) #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


(Hans-Gerd Claßen) #2

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


(Steve Warby) #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


(Hans-Gerd Claßen) #4

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


(Steve Warby) #5

Hi
It has an ID of ‘cart’

Cheers

Steve Warby


(Hans-Gerd Claßen) #6

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


(Steve Warby) #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)


(Steve Warby) #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


(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


(Hans-Gerd Claßen) #10

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


(Steve Warby) #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'"

(Steve Warby) #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 http://toolfolks.com/hype/testCart.html

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.


(Steve Warby) #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.


(Steve Warby) #17

That worked.

Cheers

Steve Warby