2012-09-02 23 views
10

Me preguntaba si iframes HTML podían heredar los datos CSS de sus padres:HTML iframes heredan css y JavaScript datos

principal.html

<html> 
    <head> 
    <style> 
    .highlight{ 
     background: #008fcc; 
     } 
    </style> 
    </head> 
<body> 
    <iframe src='frame.html'></iframe> 
</body> 
</html> 

frame.html

hello <font class='highlight'> 
+1

No, no pueden. Sin embargo, la magia puede ocurrir en <= IE7 – Peter

+16

No puede haber magia en IE ... solo maldiciones. – Will

Respuesta

11

Respuesta corta: No, iframe s genéricamente no puede heredar/acceder a estilos/script s de su página principal.

Respuesta larga: No se puede cambiar nada en los estilos o ejecutar secuencias de comandos dentro de un iframesi que viene de otro dominio (ni siquiera se puede leer su contenido a través de JavaScript DOM).

Por otro lado, si proviene del mismo dominio que su página principal, puede cambiar estilos de elementos o ejecutar scripts, haciendo algo similar a esto en su página principal (este ejemplo usa jQuery, pero puede escribirse en la llanura JavaScript):

$("#iframe_id").contents().find("#some_div").css({color: "rgb(0, 162, 232)"}); //changed style of a div inside the iframe 

Para ejecutar una función definida dentro del iframe:

$("#iframe_id").contents().document.functionName(functionParams); 

esperanza de que ayudó!

4

Puede obtenerlo con html5 seamless parámetro booleano en el iframe.

https://developer.mozilla.org/en-US/docs/HTML/Element/iframe

Pero actualmente no se aplica plenamente en cualquier navegador moderno.

La solución más simple es poner todo su CSS en un archivo separado y inculderlo tanto en la página principal como en la página iframed.

+1

Este parámetro ahora se elimina http://www.w3schools.com/tags/att_iframe_seamless.asp –

+0

¿¡Por qué demonios!?!?! Esto es una locura. No hay ninguna razón para que los scripts de Ajax sean necesarios para algo tan simple. Está haciendo que sea imposible hacer sitios que no sean js. –