Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Call to function inside iframe

Recommended Posts

I don't have a codepen in this one because it involves multiple files... (I'm trying to use GreenSock to coordinate animations+audio from multiple sources.)

I have an Iframe calling an html+js page that was generated using Adobe AnimateCC.

<iframe id="animateCC" src="AnimateCC/hw.html" class="fullscreen"></iframe>

I'm trying to call a function inside that Iframe. The playback menu from GSDevTools goes as far as the label  associated with tl and then stops :


var fn = document.getElementById('animateCC').contentWindow.init;
  tl.call(fn, [], this);


  • document.getElementById('animateCC').contentWindow is always defined
  • document.getElementById('animateCC').contentWindow.init is sometimes defined, sometimes undefined
  • the call itself never works


Inside the Iframe, the init() function looks like this:

function init() {
	canvas = document.getElementById("canvas");
	anim_container = document.getElementById("animation_container");
	dom_overlay_container = document.getElementById("dom_overlay_container");
	var comp=AdobeAn.getComposition("608A33886B013E4CA195C53BA6AACBD3");
	var lib=comp.getLibrary();


Inside the Iframe I have a button:

<button id="initButton" onclick="init();">Animate!</button>


I can see the button. When I click it, it launches the animation.

Link to comment
Share on other sites

Hm, I'm not quite sure what to tell you, @francis789. It's super difficult to troubleshoot blind. Perhaps there's a browser security issue related to you reaching into an iframe and trying to execute JS the way you are? If I were you, I'd try to simplify things as much as possible and just try to get a button to call a function in the iframe. Remove GSAP and everything else from the equation. If you can get that working well, you know it's at least possible and then you can move on to making that happen from within a timeline. See what I mean? 

Link to comment
Share on other sites

Hi @Jack, thanks for answering despite lack of context!

I did as you suggested and put a button in the main GSAP-code page. It did trigger the action. The code of the button looks like this:

<button id="initButton" onclick="document.getElementById('animateCC').contentWindow.init();" style="font-size:72px;position:absolute; top:0;left:0;">Animate!</button> 


Link to comment
Share on other sites

Ah, I bet what's happening is that when you're creating your timeline that function (in the iframe) doesn't even exist because the iframe hasn't finished loading. So you could either wait until it's done before creating your timeline stuff, or just call a function that finds that one at that time (when it's called), kinda like:

tl.call( function() {
} );


But of course that assumes that by the time the call() is reached in the timeline, that iframe has totally finished loading. See what I mean? 

  • Thanks 1
Link to comment
Share on other sites

It works!

I don't really see why just putting a function call inside a callback should change the way the thing runs, but I guess I can live with that. I'll try to look up a tutorial or 2 on Javascript fundamentals...

Link to comment
Share on other sites

The fundamental problem is that you tried to reference something in an iframe that DID NOT EXIST (yet, because it hadn't loaded). It's a little bit like:

var foo;
console.log(foo); //undefined!!
foo = "whatever";


Sure, you declared foo = "whatever"...but not until AFTER the console.log() which is why it reported undefined at that point.


So when you tried referencing document.getElementById('animateCC').contentWindow.init as a call() in your timeline, the reference was undefined. The browser couldn't find it because the iframe's JavaScript hadn't even loaded and executed to declare what 'init()" even was. 


Tucking it into a function the way I did only accomplished one thing - it made document.getElementById('animateCC').contentWindow.init execute when that parent function was actually triggered (which I assume was later in your timeline, thus enough time had elapsed by then that the iframe's content had finished loading, thus document.getElementById('animateCC').contentWindow.init was defined at that point).  


Make sense? 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.