Iframe hereda del padre

¿Cómo puedo hacer que un herede los estilos y el javascript de sus padres?Iframe hereda del padre

He tratado

var parentHead = $("head", parent.document).html(); 
$("head").html(parentHead);

embargo, que excluye los <script> las etiquetas. Además, no veo los estilos que afectan mi iframe.

¿Existe algún otro enfoque mejor o más que yo me pierda? Gracias.

Fuente

2011-01-06 Robin Maben

si se puede añadir código JavaScript, que sólo puede rendir apropiada HTML iframe –

Puede "heredar" el CSS de los padres por tener dicho código en el iframe:

<head> 
<script type="text/javascript"> 
window.onload = function() { 
    if (parent) { 
     var oHead = document.getElementsByTagName("head")[0]; 
     var arrStyleSheets = parent.document.getElementsByTagName("style"); 
     for (var i = 0; i < arrStyleSheets.length; i++) 
      oHead.appendChild(arrStyleSheets[i].cloneNode(true)); 
    } 
} 
</script> 
</head>

funcionó bien para mí en IE, Chrome y Firefox.

En cuanto a JavaScript, no pude encontrar una manera de agregar el padre JavaScript en el iframe directamente, sin embargo se puede añadir parent. en cualquier lugar de usar la JS desde dentro de la matriz, por ejemplo:

<button type="button" onclick="parent.MyFunc();">Click please</button>

Esto invocará la función llamada MyFunc definida en la página primaria cuando se hace clic en el botón.

Fuente

2011-01-06 08:54:16

Creo que el elemento que se debe buscar en la cabeza de los padres no es '' pero style' link'. – Bazzz

@Bazzz yep podría necesitar agregar ésos también. –

+19

Tenga en cuenta que no puede hacer esto en todos los dominios: el iframe debe ser local para que el niño pueda interrogar el DOM de los padres. – RET

-1

var cssLink = document.createElement("link") 
cssLink.href = "style.css"; 
cssLink .rel = "stylesheet"; 
cssLink .type = "text/css"; 
frames['frame1'].document.body.appendChild(cssLink);

¿Y stlye.css as parent's style? No estoy seguro acerca de javascript, pero posiblemente de la misma manera.

Fuente

2011-01-06 06:33:00

Siempre puede recopilar todos los estilos en la cadena y establecerlo como innerHTML del elemento de estilo en iframe.

var selfStyleSheets = document.styleSheets; 
var cssString = []; 
for (var i = 0, count = selfStyleSheets.length; i < count; i++) 
{ 
    var cssRules = selfStyleSheets[i].cssRules; 
    for (var j = 0, countJ = cssRules.length; j < countJ; j++) 
    { 
     cssString.push(cssRules[j].cssText); 
    } 
} 
var styleEl = iframe.contentDocument.createElement('style'); 
styleEl.type = 'text/css'; 
styleEl.innerHTML = cssString.join("\n"); 

iframe.contentDocument.head.appendChild(styleEl);

Fuente

2013-04-18 15:50:23 Alexey

No funciona con IE6-8 (si eso importa).En realidad, tampoco responde la pregunta porque hace lo contrario (agrega los estilos del iframe al elemento principal). – Tobias81

Aquí está mi "mejor opción" para agregar los estilos del padre del iframe (no los scripts). Funciona con IE6-11, Firefox, Chrome, (antiguo) Opera y probablemente en todas partes.

function importParentStyles() { 
    var parentStyleSheets = parent.document.styleSheets; 
    var cssString = ""; 
    for (var i = 0, count = parentStyleSheets.length; i < count; ++i) { 
     if (parentStyleSheets[i].cssRules) { 
      var cssRules = parentStyleSheets[i].cssRules; 
      for (var j = 0, countJ = cssRules.length; j < countJ; ++j) 
       cssString += cssRules[j].cssText; 
     } 
     else 
      cssString += parentStyleSheets[i].cssText; // IE8 and earlier 
    } 
    var style = document.createElement("style"); 
    style.type = "text/css"; 
    try { 
     style.innerHTML = cssString; 
    } 
    catch (ex) { 
     style.styleSheet.cssText = cssString; // IE8 and earlier 
    } 
    document.getElementsByTagName("head")[0].appendChild(style); 
}

Fuente

2015-01-29 14:48:32 Tobias81

Esta es una muy buena respuesta. Pero faltaba importCssRules si el padre tenía. – joydesigner

Esto tendrá un problema en IE mientras se accede a cssText en algunos casos, es decir, reglas de fotogramas clave. Obtendrá "Miembro no encontrado" https://connect.microsoft.com/IE/feedback/details/955703/accessing-csstext-of-a-keyframe-rule-that-contains-a-webkit-property-via- cssom-genera-excepción –

Funciona con angularjs también .... –

Iframe hereda del padre

Respuesta

Cuestiones relacionadas