Inconsistent Loading with Multiple Canvasses On One Page

[AlexMercer]

I'm working on a project that is requiring multiple animate canvasses (7) on one page, that only play once they come into view. It seems that everybody on here suggests to sandbox them all in iframes. I've done that successfully, however, there are times when I get an "undefined" error when trying to access the exportRoot. Sometimes all of the animation trigger correctly, and other times some are undefined.

I've tried wrapping those calls in functions that are triggered by an iframe onload, so I can be sure the iframe is loaded prior to trying to access that iframe's exportRoot, but no luck having consistent loading for all of them. Is there a best practice for this?

Here is the code I have in the header of my site:

<script>        
        // Collect iframes
        function sceneOneHandler() {
             var iframe = document.getElementById("scene-1-iframe").contentWindow.exportRoot;    
        }
        function sceneThreeHandler() {
            var iframeScene3 = document.getElementById("scene-3-iframe").contentWindow.exportRoot;    
        }  
        function sceneFiveAHandler() {
            var iframeScene5a = document.getElementById("scene-5a-iframe").contentWindow.exportRoot;    
        }  
        function sceneFiveBHandler() {
           var iframeScene5b = document.getElementById("scene-5b-iframe").contentWindow.exportRoot;    
        }
        function sceneSixAHandler() {
           var iframeScene6a = document.getElementById("scene-6a-iframe").contentWindow.exportRoot;    
        }
        function sceneSixBHandler() {
           var iframeScene6c = document.getElementById("scene-6c-iframe").contentWindow.exportRoot;    
        }
        function sceneSixDHandler() {
           var iframeScene6d = document.getElementById("scene-6d-iframe").contentWindow.exportRoot;    
        }       
    </script>

Here is the code in the footer (wrapped in a window load function) 

function raiseSun() {
            iframe.mainMovie.house.gotoAndPlay(2);
        }
        function showHomes() {
            iframeScene3.mainMovie.gotoAndPlay(2);
        }
        function growBuilding() {
            iframeScene5a.mainMovie.gotoAndPlay(2);
        }
        function playFiveB() {
            iframeScene5b.mainMovie.gotoAndPlay(2);
        }
        function playsixA() {
            iframeScene6a.mainMovie.gotoAndPlay(2);
        }
        function playsixC() {
            iframeScene6c.mainMovie.gotoAndPlay(2);
        }
        function playsixD() {
            iframeScene6d.mainMovie.gotoAndPlay(2);
        }

[AlexMercer]

Just a quick update, I've tried this as well in the footer, and now they are all undefined

 // Collect Iframes
    document.getElementById('scene-1-iframe').onload = function() {
        var iframe = document.getElementById("scene-1-iframe").contentWindow.exportRoot;
    }
    document.getElementById('scene-3-iframe').onload = function() {
        var iframeScene3 = document.getElementById("scene-3-iframe").contentWindow.exportRoot;
    }
    document.getElementById('scene-5a-iframe').onload = function() {
        var iframeScene5a = document.getElementById("scene-5a-iframe").contentWindow.exportRoot;
    }    
    document.getElementById('scene-5b-iframe').onload = function() {
       var iframeScene5b = document.getElementById("scene-5b-iframe").contentWindow.exportRoot;
    }    
    document.getElementById('scene-6a-iframe').onload = function() {
       var iframeScene6a = document.getElementById("scene-6a-iframe").contentWindow.exportRoot;
    }     
    document.getElementById('scene-6c-iframe').onload = function() {
       var iframeScene6c = document.getElementById("scene-6c-iframe").contentWindow.exportRoot;
    }    
    document.getElementById('scene-6d-iframe').onload = function() {
       var iframeScene6d = document.getElementById("scene-6d-iframe").contentWindow.exportRoot;
    }      
            
    
    // Scene Play Functions
    function raiseSun() {
        iframe.mainMovie.house.gotoAndPlay(2);
    }
    function showHomes() {
        iframeScene3.mainMovie.gotoAndPlay(2);
    }
    function growBuilding() {
        iframeScene5a.mainMovie.gotoAndPlay(2);
    }
    function playFiveB() {
        iframeScene5b.mainMovie.gotoAndPlay(2);
    }
    function playsixA() {
        iframeScene6a.mainMovie.gotoAndPlay(2);
    }
    function playsixC() {
        iframeScene6c.mainMovie.gotoAndPlay(2);
    }
    function playsixD() {
        iframeScene6d.mainMovie.gotoAndPlay(2);
    }

[AlexMercer]

I was able to get it sorted. Here's a sample of the code I ended up with, seems to be working.

NOTE: this code is using ScrollMagic to trigger the function.

// init controller
    var controller = new ScrollMagic.Controller();        
    var scene = new ScrollMagic.Scene({
        triggerElement: "#scene-1-animation", 
        duration: 200,
        reverse: false
    })
    .addTo(controller)
    //.addIndicators()		
    .on("enter", function (e) {
        var iframe = document.getElementById("scene-1-iframe").contentWindow.exportRoot;
        function raiseSun() {
            iframe.mainMovie.house.gotoAndPlay(2);
        }
        raiseSun();
    })