Toda la vida pensé que no se podían modificar los estilos de un iframe
, hasta hoy que me tocó implementarlo por narices para la Web de un cliente (a veces las necesidades imperiosas agudizan el ingenio).
Después de mucho indagar por internet y algo de triquiñuelas personales logré implementarlo. Tal vez no sea una solución muy elegante, pero funciona.
Vamos al lío.
Agrega un EventListener
Tendremos que escuchar cada cierto tiempo si el iframe
externo terminó de cargarse correctamente…
Para ello asignamos a una variable una función setInterval
.
const variableDeIntervalo = setInterval( modificarIframe, 500 );
Crea la función principal
Una vez creado el intervalo, creo la función y añado las primeras verificaciones.
function modificarIframe() {
// Busco el iframe en el DOM.
let iframeAModificar = document.querySelector( 'iframe' );
// Verifico si el iframe ya está cargado.
if (
! iframeAModificar
|| typeof iframeAModificar === 'undefined'
) {
return;
}
}
Cuando el iframe esté cargado
En la misma función y una vez que el iframe esté cargado obtengo su contenido y lo modifico con los nuevos estilos.
// Detengo el intervalo para evitar el consumo de recursos del navegador.
clearInterval( variableDeIntervalo );
// Obtengo el contenido del elemento iframe.
let doc = iframeAModificar.contentDocument;
let nuevosEstilos = `
<style>
.alguna-clase {
color: #ffffff;
}
/* Aplica todos los estilos que desees aquí. */
</style>
`;
// La siguiente línea sobrescribe el contenido del iframe con los nuevos estilos.
doc.body.innerHTML = doc.body.innerHTML + nuevosEstilos;
Control extra
A esta función debería agregar otro condicional para que en el caso de que en cierto límite de tiempo el iframe
no se cargue correctamente, el intervalo deje de ejecutarse.
Para ello podemos modificar la función agregando al principio los siguientes condicionales (al final te daré todo el código completo para que no tengas que estar adivinando dónde ubicarlo, solo separo el código para que sea más fácil explicar su funcionamiento).
let iteracionContador = 0;
let iteracionMaxima = 10;
const variableDeIntervalo = setInterval( modificarIframe, 500 );
function modificarIframe() {
// Chequeo que el contador de iteraciones no supere el iterador máximo para evitar el consumo de recursos.
if ( iteracionContador === iteracionMaxima ) {
// Paro el intervalo.
clearInterval( variableDeIntervalo );
return;
}
}
Código completo
Ahora sí, te dejo el código completo con todo lo explicado anteriormente.
( function () {
let iteracionContador = 0;
let iteracionMaxima = 10;
const variableDeIntervalo = setInterval( modificarIframe, 500 );
function modificarIframe() {
// Chequeo que el contador de iteraciones no supere el iterador máximo para evitar el consumo de recursos.
if ( iteracionContador === iteracionMaxima ) {
// Paro el intervalo.
clearInterval( variableDeIntervalo );
return;
}
// Busco el iframe en el DOM.
let iframeAModificar = document.querySelector( 'iframe' );
// Verifico si el iframe ya está cargado.
if (
! iframeAModificar
|| typeof iframeAModificar === 'undefined'
) {
iteracionContador++;
return;
}
// Detengo el intervalo para evitar el consumo de recursos del navegador.
clearInterval( variableDeIntervalo );
// Obtengo el contenido del elemento iframe.
let doc = iframeAModificar.contentDocument;
let nuevosEstilos = `
<style>
.alguna-clase {
color: #ffffff;
}
/* Aplica todos los estilos que desees aquí. */
</style>
`;
// La siguiente línea sobrescribe el contenido del iframe con los nuevos estilos.
doc.body.innerHTML = doc.body.innerHTML + nuevosEstilos;
}
} )();
Morgado Benítez
Gracias yo tampoco he trabajado mucho con iframes.. se agradece el tutorial
Roberto
Genial!!!
Muchas gracias 🙂