iFrame es una forma muy conveniente para mostrar contenido externo en su página web. Sin embargo, es un poco complicado si desea agregar adicional o alterar el estilo CSS existente. No puede simplemente agregar CSS en la página padre/envoltura. En este tutorial, le mostraremos cómo usar JavaScript para inyectar CSS en Iframe.
en el fragmento de código que aparece a continuación, una vez cargado todo, obtendremos el elemento IFRAME por ID. Luego obtenga el contentDocument e inyecte nuestros estilos en iframe usando innerHTML.,
O puedes hacerlo con jQuery.
$("#myiFrame").on("load", function() { let head = $("#myiFrame").contents().find("head"); let css = '<style>/********* Put your styles here **********</style>'; $(head).append(css);});
Example
por ejemplo, aquí está la página de tutorial de Progressbar de CSS 3D que queremos agregar a la nuestra usando iframe.
<iframe width="1024px" height="768px" src="http://127.0.0.1:5501/bar"></iframe>
Supongamos que queremos cambiar la longitud de la barra de progreso hasta el 45%. Desafortunadamente, no podemos hacer algo como esto desde nuestro CSS padre.
.bar { width: 45%; /* This will not work */}
intentemos usar JavaScript. Es importante que tengas que esperar hasta que se haya cargado el iframe antes de poder inyectar el CSS., En este caso, pondremos el código en onload event listener.
Aquí está el resultado.
Agregar archivo CSS al iFrame
Puede agregar un archivo CSS completo en lugar de inyectar estilos separados creando link y agregándolo a la cabeza del iframe.