javascriptjqueryiframecreatejsadobe-animate

How to wait till adobe animation canvas drawn in iframe?


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)
});

Solution

  • 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
    });