Inconsistent Loading with Multiple Canvasses On One Page
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);
}
