Calling a function or focusing a programmatically generated Iframe from an HTML5 canvas

Question

I have an HTML5 canvas controlled and generated by a library of JavaScript files (Craftyjs library mostly).
The canvas generates 2 regular html iframes (same domain) which are stacked on top of each other.
The canvas switches between the two iframes based on calls from the iframes to the parent so I know the code controlling the canvas is easily accessed by their common parent.

I want the parent canvas to either call a function in the iframes to have them focus on a specific element in them or to somehow just have the iframes get focus in general.
I would also prefer to not have to constantly reload/recreate the iframes to get focus.

 ---- In the Iframe ----
 //The head has a function "focusThis()" to focus on an element in the iframe
 //body also has onfocus="focusThis();"     

 //Call the parent to change to the other iframe
 parent.changeIframe();

 ---- In the parent's canvas JS code ----

 // I know the function and will hide/show the iframe, but it won't focus
 function changeIframe(){

     //For now, just switch randomly
     MODE = Math.floor(Math.random()*2);

    //I am hiding the iframes here, then showing the one that should be seen
    Crafty("Game1").each(function () {this.visible = false});
    Crafty("Game2").each(function () {this.visible = false});

    //Switch the iframes
    if(MODE){
         //Show this iframe
         Crafty("iframe1").each(function () {this.visible = true});

These are things I have tried to get to work
When it doesn't throw an error it doesn't do anything in chrome or FireFox.
(Object [object global] has no method 'focusThis') is a common error

     //document.getElementById('iframe1').focus();
     //document.getElementById("iframe1").contentWindow.focusThis();
     //document.getElementById('iframe1').contentWindow.focusThis();

     //var iframe_window = window.frames["iframe1"];
     //iframe_window.focus();
     //iframe_window.contentDocument.body.focus();

     //window.parent.document.getElementById('iframe1').contentWindow.focusThis;
     //window.parent.document.getElementById('iframe1').contentWindow.focusThis();

     //window.frames["iframe1"].focus();
     //window.frames["iframe1"].contentWindow.focus();
     //window.frames["iframe1"].contentDocument.focus();

     var frame = document.getElementById("iframe1");
     if(frame){
          alert("yep");
              frame.contentWindow.focusThis();
         }
    }
     else{
          //....Same thing but for iframe2
    }
 }

Any help would be greatly appreciated.

Answer 1

I solved my problem after some more fiddling.
This also solved my problem without having to reload the iframe.

I set a timer in the onload function of each iframe that tries to focus itself onto an element in itself based on a parent flag variable (MODE) that tells the iframe if it is supposed to have focus and an internal variable (focused) that tells it to stop trying to focus once it finally has focus again.

Somewhere in the head...

        var focused = false;
        function focusThis(){
            if(parent.MODE && !focused){
                document.getElementById("SOME_ELEMENT_I_WANT_FOCUSED").focus();
                focused = true;
            }
        }

Somewhere in onLoad...

 var autoFocus = 
        setInterval(function(){if(parent.MODE && !focused) focusThis()},500);

Somewhere in script below the body...

 parent.changeIframe();
 changeImage();
 if(!parent.MODE){
     //This element is just to have a place for focus to go when out of focus
     document.getElementById("NA").focus();
     focused = false;
 }
 else
     focused = true;