Algunos trucos para IE

Internet Explorer no cesa de sorprenderme. Los últimos dos temas que tuve, fueron con la función javascript addEvent, y con la función .innerHTML.

Respecto a addEvent, algunas versiones de IE revientan como una chinche cuando se carga la página, sin dar mayores explicaciones. La solución entonces, está en cambiar addEvent por attachEvent. No tengo muy clara la diferencia, peo con attachEvent IE se queda contento.

El otro tema fue al querer usar en una función javascript innerHTML para cargar las opciones de un select. Explorer corta el primer option. Parece que es un bug que está abierto desde hace unos 7 años. La solución, que encontré por acá:

http://elmicoxcodes.blogspot.com/2007/02/innerhtml-and-select-option-in-ie.html

Consiste en lugar de usar innerHTML, usar la función de más abajo. De manera que si antes teníamos:

document.getElementById(«my_select»).innerHTML = «<option value=’1′>not</option> <option value=’2′>work</option>»;

Ahora tendríamos:

var inner = «<option value=’1′>Now</option> <option value=’2′>work</option>»;
select_innerHTML(document.getElementById(«my_select»),inner);»

La función maravillosa:

function select_innerHTML(objeto,innerHTML){
 /******
 * select_innerHTML - corrige o bug do InnerHTML em selects no IE
 * Veja o problema em: http://support.microsoft.com/default.aspx?scid=kb;en-us;276228
 * Versão: 2.1 - 04/09/2007
 * Autor: Micox - Náiron José C. Guimarães - micoxjcg@yahoo.com.br
 * @objeto(tipo HTMLobject): o select a ser alterado
 * @innerHTML(tipo string): o novo valor do innerHTML
 *******/
 objeto.innerHTML = ""
 var selTemp = document.createElement("micoxselect")
 var opt;
 selTemp.id="micoxselect1"
 document.body.appendChild(selTemp)
 selTemp = document.getElementById("micoxselect1")
 selTemp.style.display="none"
 if(innerHTML.toLowerCase().indexOf("<option")<0){//se não é option eu converto
 innerHTML = "<option>" + innerHTML + "</option>"
 }
 innerHTML = innerHTML.toLowerCase().replace(/<option/g,"<span").replace(/<\/option/g,"</span")
 selTemp.innerHTML = innerHTML
for(var i=0;i<selTemp.childNodes.length;i++){
 var spantemp = selTemp.childNodes[i];
if(spantemp.tagName){
 opt = document.createElement("OPTION")
if(document.all){ //IE
 objeto.add(opt)
 }else{
 objeto.appendChild(opt)
 }
//getting attributes
 for(var j=0; j<spantemp.attributes.length ; j++){
 var attrName = spantemp.attributes[j].nodeName;
 var attrVal = spantemp.attributes[j].nodeValue;
 if(attrVal){
 try{
 opt.setAttribute(attrName,attrVal);
 opt.setAttributeNode(spantemp.attributes[j].cloneNode(true));
 }catch(e){}
 }
 }
 //getting styles
 if(spantemp.style){
 for(var y in spantemp.style){
 try{opt.style[y] = spantemp.style[y];}catch(e){}
 }
 }
 //value and text
 opt.value = spantemp.getAttribute("value")
 opt.text = spantemp.innerHTML
 //IE
 opt.selected = spantemp.getAttribute('selected');
 opt.className = spantemp.className;
 }
 }
 document.body.removeChild(selTemp)
 selTemp = null
 }

Etiquetas: bugs, IE, javascript