miércoles, 7 de marzo de 2012

Encontrar elementos dentro de Iframe js

Tuve un problema tratando de encontrar unas imágenes rotas dentro de un iframe, que proviene de un control llamado Datadynamics, pero la solución es muy generica por lo cual la comparto, pues de muchas opción que encontré en Internet casi que ninguna me sirvió, entonces hice una compilación de pruebas y construí algo que al final me solucionó el problema, y como ya es costumbre las comparto con ustedes.


Este ejemplo  corrige algunas imágenes que se cargaron sin el nombre de nuestro sitio, no es un problema común, pero hay partes importantes que podemos rescatar.

function CorregirImagenes()
         <               
            // obtiene el nombre de nuestro sitio
            var path =  '<%=Context.Request.ApplicationPath %>'; 
            // Obtiene el iframe
            var ifReport = document.getElementById('IframeName');
           // obtiene el document del iframe
            var doc =  ifReport.contentDocument || ifReport.contentWindow.document;
           // se usa || debido a que en explorer usa una opción y los demás exploradores usan la otra

           // obtiene el body del iframe
            var iFContent = doc.body; 
           // Hasta este punto ya obtenemos lo que queramos dentro de este Iframe

            // obtiene todas las imágenes dentro del body
            // ya obtenidas las imágenes les hago un proceso de inserción  del nombre del sitio para que las cargue correctamente, entonces una funcioncita por si necesitan hacer inserción de un string dentro de otro            var imagenes = iFContent.getElementsByTagName('img');
               for( i=0; i < imagenes. length; i++)
                <    
                    var imagen = imagenes[i].src;
                    var urlimg = imagen.split("/");
                    // debido a que la url de la imagen viene con "/" (http://localhost/sitio/corehandl**), hacemos un split y buscamos en la posición 4 el nombre del sitio, es decir [3], esto nos devolvería la palabra "sitio", si esto es DIFERENTE a nuestro path "/sitio" (al cual le hacemos un substring para compararlo si el "/"), entonces le añadimos nuestro path.
                    if(urlimg[3] != path.substring(1,path.length))
                     <   
                        var newurl = imagen.substring(0, imagen.indexOf("/CoreHandler")) + path +              imagen.substring(imagen.indexOf("/CoreHandler"), imagen.length);                       
                       
                        imagenes[i].src = newurl;                  
                    >
               >           
            return false;
        >


De nuevo espero a alguien le sirva, y comparta este conocimiento.

No hay comentarios:

Publicar un comentario