How to wait till adobe animation canvas drawn in iframe?

Question

Adobe Animate Canvas generates content and I attach that content in iframe. Then canvas is drawn and various script variables are created in iframes document.

I need to access variable 'stage' that is generated when iframe of adobe animation is loaded fully.

What I have to do now - to attach setTimeout and then it seem to be accessable. If I do not attach timeout, console throws error.

What I want to achieve - I want to avoid setTimeout and refactor code in better way.

I have tried jquery:

$element.on( 'load', function() {
    // Gives error when accessing the stage property
    $element[0].contentWindow.stage
    // allows to access stage property
    setTimeout(() => {
        console.log($element[0].contentWindow.stage)
    }, 1000)
});

I won't complain about the down vote but at least you could provide information what the post was lacking. — LuckyLuke, Oct 26 '20 at 16:23
You actually have to do this inside the iframe, and then when loaded, tell parent that i'm done, go one! — lohe, Oct 27 '20 at 17:28

score 0 · Accepted Answer · answered Oct 27 '20 at 17:13

So basically I have tried a lot of suggestions.

Tried:

$(element).load
$(element).on('load')
Other stuff...

What worked out for me was this code:


    var onFullLoad = function(iframe) {
        return new Promise((resolve) => {
          var wait = function() {
            if (iframe && iframe.contentWindow && iframe.contentWindow.YourTargetedVariable) {
              resolve(iframe);
            } else {
              window.requestAnimationFrame(wait);
            }
          };
          wait();
        })
      };

Then you can do go on like this:

onFullLoad(yourTargetIframe).then(function(){
//your code
});

How to wait till adobe animation canvas drawn in iframe?

1 Answers1