Problema con eventos en iframe firefox

pato12 · #1 (**permalink**) 05/02/2011, 20:59

Hola,
Estoy creando un iframe (document.createElement) y le quiero poner algunos eventos como:

- onmouseup (es un iframe editable)
- onmousedown
- onfocus
- onkeyup

pero en firefox no anda y en chrome anda perfecto :S.. hago así:

Código Javascript:

Ver original// eventos
        iframe_dom.contentWindow.onmouseup = this.mirar_botones;
        iframe_dom.contentWindow.onmousedown = this.mirar_botones;
        iframe_dom.contentWindow.onfocus = this.mirar_botones;
        iframe_dom.contentWindow.onkeyup = this.mirar_botones;

Ni se ejecuta la función (le pongo alert para ver y no se ejecuta). Y si la ejecuto aparte si anda bien.

Gracias
Saludos

zerokilled · #2 (**permalink**) 05/02/2011, 21:39

buenas...
no veo nada mal en dichas lineas; de hecho, es la forma correcta. habria que ver que hace la funcion mirar_botones. probablemente la funcion requiere ejecutarse en el contexto en que esta definido, o sea en la ventana padre. aun asi, me extraña que en chrome funcione pero no en firefox.

Panino5001 · #3 (**permalink**) 05/02/2011, 22:05

Esto funciona sin problemas:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
<script type="text/javascript"> 
function t(){ 
    var i=document.createElement('iframe'),ex; 
    ex=i.onload=function(){ 
        var doc=this.contentWindow.document || this.contentDocument; 
        doc.onmousedown=function(){alert(123);} 
    } 
    if(window.ActiveXObject){ 
        i.onreadystatechange=function(){ 
            if(i.readyState=='complete'){ 
                 ex.call(this); 
             } 
        } 
    } 
    document.body.appendChild(i); 
} 
onload=t; 
</script> 
 
</head> 
 
<body> 
</body> 
</html>

Habría que ver si estás asignando los eventos cuando el document del iframe está efectivamente disponible.

pato12 · #4 (**permalink**) 05/02/2011, 22:21

Bueno, miren resumí el código para demostrar como lo hago:

Código Javascript:

Ver original<script type="text/javascript">
<!--
var Editor = function(id){
    this.init = function(){
        var elwin = this;
        this.input_dom = document.getElementById(id);
        this.iframe_dom = document.createElement('iframe');
        
        with(this.iframe_dom){
            src = 'about:blank';
            style.height = '200px';
            style.width = '500px';
        }
        
        setTimeout(function(){
            if(elwin.iframe_document.designMode)
                elwin.iframe_document.designMode = 'on';    
            else if(elwin.iframe_body.contentEditable)
                elwin.iframe_body.contentEditable = true;
        }, 100);
        
        this.input_dom.parentNode.insertBefore(this.iframe_dom,this.input_dom);
        
        
        with((this.iframe_dom.contentDocument || this.iframe_dom.contentWindow.document)) {
            clear();
            open();
            write("<html><body></body></html>");
            close();
        }
        
        this.iframe_document = this.iframe_dom.contentDocument || this.iframe_dom.contentWindow.document;
        this.iframe_body = this.iframe_document.body || this.iframe_document.getElementsByTagName('body')[0];
        
        this.iframe_dom.contentWindow.onmouseup = function(){alert('activo');};
    };
    this.init();
};
var editar;
window.onload=function(){
    editar = new Editor('textarea');
};
-->
</script>
<textarea name="textarea" id="textarea" cols="55" rows="15"></textarea>

En chrome anda perfecto y se ejecuta el alert, y en firefox no :S..

Panino5001 · #5 (**permalink**) 05/02/2011, 22:27

Ahora sí te entiendo. Al parecer en modo de diseño Firefox tiene problemas con los eventos. A mi me sucede lo mismo con esto:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
<script type="text/javascript"> 
function t(){ 
    var i=document.createElement('iframe'),ex; 
    i.width=i.height=500; 
    ex=i.onload=function(){ 
        var doc=this.contentWindow.document || this.contentDocument; 
        doc.designMode='on'; 
        try{doc.body.focus();}catch(e){}//hack explorer 
        doc.execCommand("InsertImage",false,'http://t1.gstatic.com/images?q=tbn:ANd9GcRSZCAIXjjpBR8zJb6xwCimZ7J814ra2rHMcQv_aZgNmCAOHy3F&t=1');  
        doc.onmousedown=function(){alert(123);} 
    } 
    if(window.ActiveXObject){ 
        i.onreadystatechange=function(){ 
            if(i.readyState=='complete'){ 
                 ex.call(this); 
             } 
        } 
    } 
    document.body.appendChild(i); 
} 
onload=t; 
</script> 
 
</head> 
 
<body> 
</body> 
</html>

Habrá que estudiarlo un poco

pato12 · #6 (**permalink**) 05/02/2011, 22:35

Uh :S.. y no habrá alguna manera de capturar algún evento cuando se apreté un botón? intente de todos modos... El único modo que ando, es:

Código Javascript:

Ver originalthis.iframe_dom.contentWindow.document.body.addEventListener('click', this.mirar_botones, false);

Pero eso es al hacer click, mucho no me sirve :S.. Y creo que el firefox 4 tiene un bug, si borro el setTimeout (el que lo hace "editable" al iframe) y apretó en el iframe anda y sale el alert. Pero si apretó en "aceptar" del alert sale otro alert y así infinitamente :|

zerokilled · #7 (**permalink**) 05/02/2011, 22:41

curioso, con los eventos de DOM Level 0 no funciona en firefox pero con Level 2 trabaja de lo mas bien. por cierto, el bug que comentas (los alert infinitos) al menos no me sucede en firefox3. de todos modos, ya tienes la solucion, utiliza addEventListener. no necesariamente tiene que ser el evento click, puede ser el mismo que estabas definiendo en DOM Level 0, mouseup.

pato12 · #8 (**permalink**) 05/02/2011, 22:50

Si pero con addEventListener solo me anda los eventos de click (los que menos me sirve)..

Código Javascript:

Ver original//eventos
            this.iframe_dom.contentWindow.document.body.addEventListener('click', function(){alert('click')}, false);
            this.iframe_dom.contentWindow.document.body.addEventListener('mouseup', function(){alert('click up')}, false);
            this.iframe_dom.contentWindow.document.body.addEventListener('focus', function(){alert('foco')}, false);
            this.iframe_dom.contentWindow.document.body.addEventListener('keyup', function(){alert('boton')}, false);

Esos son los eventos, y los de click andan si apreto sobre un enlace... :S
Lo del bug es muy gracioso porque si apretó en cualquier lado de la pantalla aparece el alert. Y solo se lo detiene si apretas click izquierdo :|

Panino5001 · #9 (**permalink**) 05/02/2011, 22:51

Muy buena observación, zerokilled!
Igualmente, me parece mejor dejar los iframes y trabajar directamente con contentEditable:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
<script> 
function formatText(cmd){ 
    document.execCommand(cmd, false, null); 
} 
function insertarImagen(){ 
    var u; 
    if(!(u=prompt('ingresar url','http://')))return; 
     document.getElementById('pp').focus(); 
     document.execCommand("InsertImage",false,u); 
}  
</script> 
</head> 
 
<body> 
<form action="" method="get"> 
  <input name="input" type="button" onclick="formatText('bold')" value="NEGRITA" /><input name="input" type="button" onclick="formatText('italic')" value="CURSIVA" /><input name="input" type="button" onclick="formatText('underline')" value="SUBRAYADO" /><input name="input" type="button" onclick="insertarImagen()" value="INSERTAR IMAGEN" /> 
</form> 
<div onmouseup="document.getElementById('log').innerHTML='mouseup capturado'" onmousedown="document.getElementById('log').innerHTML='mousedown capturado'" id="pp" contenteditable="true">Este es un texto editable</div> 
<div id="log"></div> 
</body> 
</html>

pato12 · #10 (**permalink**) 05/02/2011, 22:55

Bueno... a dejar los iframe :P... que tan compatible es contentEditable??

Panino5001 · #11 (**permalink**) 05/02/2011, 22:57

Funciona con todos los navegadores modernos (en Firefox, a partir de la versión 3)

pato12 · #12 (**permalink**) 05/02/2011, 23:03

Gracias, busque y encontré esto para el que le sirva... y ya que estoy con firefox ¬¬.. alguna manera de que document.execCommand('bold', false, null) ponga <strong> y no: (y no estando insertando html.... que sea mas automático como execCommand.. no se si me explico bien)

Código HTML:

Ver original<span style="font-weight: bold;">hola!!</span>

zerokilled · #13 (**permalink**) 05/02/2011, 23:09

@pato12, fijate que los ultimos 4 eventos de ejemplos los estas registrando en el elemento <body>. no lo habia intentado en <body>, lo hice en el contexto del objeto window del marco, o sea contentWindow y ahi me funcionaron. pero en fin no se, todo depende donde quieras registrarlos.

pato12 · #14 (**permalink**) 05/02/2011, 23:13

Noooooo!! tenes razooon :D... anda perfecto ahora.. muchas gracias! :P

Ahora.. solo me queda un "problema".. lo que pregunte arriba..