3

Problema

Quiero incrustar un en utilizando un iframe.

Mi código para incrustar funciona pero no aplica los estilos de un css externo.

Si escribo el código HTML directo en Blogger el estilo sí se aplica, pero no quiero estar editando mi código desde Blogger.

Código

<iframe width="100%" height="400" 
        src="http://www.googledrive.com/host/0Bz6Br9MUV3OCVzV6cUtsQU5DTVE"></iframe>

1 respuesta 1

4

El problema no esta en el iframe, sino en el que estás cargando.

Al intentar cargarlo en mi navegador, me está dando este mensaje de error (mirando la consola, F12):

Mixed Content: The page at 'https://82e7f306a6f428b6dcf2107238d0152af2d3013e-www.googledrive.com/host/0Bz6Br9MUV3OCVzV6cUtsQU5DTVE' was loaded over HTTPS, but requested an insecure stylesheet 'http://www.googledrive.com/host/0Bz6Br9MUV3OCdlJVS2RlR0gzMWc'. This request has been blocked; the content must be served over HTTPS.

Lo que este error significa es que el navegador no quiere cargar el CSS por que este es cargado con un protocolo menos seguro. Debes tener en cuenta que no importa si lo cargas con http, por que es redireccionado automaticamente por google drive para utilizar https.

Solución:

Deberías modificar el el html para utilizar la notación de protocolo relativo, en lugar de usar:

<link rel="stylesheet" type="text/css"
      href="http://www.googledrive.com/host/0Bz6Br9MUV3OCdlJVS2RlR0gzMWc" />

Utiliza:

<link rel="stylesheet" type="text/css"
      href="//www.googledrive.com/host/0Bz6Br9MUV3OCdlJVS2RlR0gzMWc" />

Como puedes ver, lo que hay que eliminar es http: y dejar que la URL comience a partir de las dos barras //.

Esto hará que sin importar el protocolo con que cargues la página, el CSS se cargará utilizando el mismo protocolo.

Ejemplo

Aquí te dejo el ejemplo funcionando, este archivo lo subí a mi propio Google Drive e hice la modificación que te dije arriba.

<iframe width="100%" height="400" src="http://www.googledrive.com/host/0B7yVPJJfN8f0VWZNbFdnc2lHSnM"></iframe>

2
  • Gracias, funcionó. Pero también encontré otra solución, agregando la propiedad sandbox="allow-top-navigation" en el iframe.
    – HoangJo
    Commented el 23 ene. 2016 a las 23:19
  • Esto no lo sabía, muchas gracias.
    – SalahAdDin
    Commented el 24 ene. 2016 a las 9:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.