Question

我有一个由JavaScript文件库（大多数是Craftyjs库）控制和生成的HTML5画布画布生成2个常规的html iframe（相同的域），它们相互堆叠画布根据从iframe到父母的调用在两个iframe之间切换，因此我知道控制画布的代码很容易被他们的父母访问。

我希望父画布能够调用iframe中的一个函数让它们专注于它们中的特定元素，或者以某种方式让iframe获得焦点。
我也希望不必经常重新加载/重新创建iframe以获得焦点。

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

这些是我试图开始工作的事情当它没有抛出错误时，它在chrome或FireFox中没有做任何事情（对象[object global]没有方法'focusThis'）是一个常见的错误

     //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
    }
 }

非常感谢任何帮助。

Answer 1

经过一番调整，我解决了我的问题这也解决了我的问题，而无需重新加载iframe。

我在每个iframe的onload函数中设置了一个计时器，它试图根据父标志变量（MODE）将自己的焦点集中在一个元素上，该变量告诉iframe它是否应该有焦点和一个内部变量（聚焦）它告诉它一旦它最终再次聚焦就停止尝试聚焦。

头脑中的某个地方......

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

onLoad中的某个地方......

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

身体下方的脚本......

 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;

调用函数或从HTML5画布中聚焦以编程方式生成的Iframe

1 个答案: