Cambiar estilos CSS de un iframe externo

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