2

me estoy encontrando con un detalle que desconocía, lo cierto es que nunca me ha tocado ponerme con temas de iFrames y, al desarrollar una página HTML y visualizarla correctamente en todos los navegadores. Esta contiene un Nav y un Footer que actúan de menús y que la posición debe ser 'fixed' para que el usuario al navegar por la página, estén ahí en todo momento mientras hace scroll etc.

Ahí se visualiza bien, en un iFrame a través de otro documento HTML también, pero cuando lo subo a una plataforama que carga un iFrame inevitablemente, estos elementos pese a estar bien puestos con 'fixed', no funciona, se queda el Nav en la parte superior del documento visto desde el viewport del iFrame y el Footer también en la parte inferior (si, cuando inspecciono desde el navegador, aparecen como 'fixed').

He probado a ponerlo en la hoja de estilos CSS. A través de Jquery / Javascript... Y nada funciona.

.ic_header{
    position: fixed;
    top: 0;
    z-index: 10;
}

*Los otros estilos los omito ya que son de diseño.

var $header = $('.ic_header');
$header.css({
     'position': 'fixed',
     'top': '0',
     'z-index': '10'
});

Empiezo a pensar que existe una restricción, ¿es así?, me sorprende... si que conozco el tema de cross-scripting pero en éste caso la plataforma, rutas, contenido, y todo lo relacionado a ésta aplicación, pertenecen al mismo domain.


Editado 06/03/2017.

Hola de nuevo, ésto es lo que yo veo desde las dos plataformas. Este es el arbol HTML donde añadimos el contenido, estilos, y otras actividades. Es una herramienta de autor para hacer lecciones interactivas a nivel educacional, y en éste árbol es donde si funcionan los elementos 'fixed'.introducir la descripción de la imagen aquí

Después exportamos toda esta 'lección' a una plataforma distinta, que es un portal que carga un iframe y a partir del #document, es donde empieza la lección que hemos editado, y es precisamente ésta barrera la que creo que impide, que cosas como el 'fixed' no funcionen o no estoy dando con la tecla.

introducir la descripción de la imagen aquí

Esto es cuanto puedo deciros y se que es poco. El código es el mismo que arriba. Gracias por la ayuda.

9
  • 1
    ¿quieres posicionar un elemento de un iframe en el documento padre del iframe ? Podrías poner alguna imagen de lo que sucede ? Te podríamos ayudar un poco más. Commented el 3 mar. 2017 a las 12:41
  • 1
    queremos screenshots
    – ffflabs
    Commented el 3 mar. 2017 a las 12:53
  • Claro!. Os pondré enseguida el árbol del HTML y unas imágenes, gracias!.
    – Qadesh
    Commented el 3 mar. 2017 a las 12:55
  • 2
    "Como tenes estructurado el HTML? Podrias especificar con mas detalle cual es el HTML y como lo incluís en el IFRAME y en qué momento aparece este comportamiento?" - Maskter.
    – lois6b
    Commented el 3 mar. 2017 a las 12:55
  • ¿El documento padre (en donde se incrusta el iframe) tiene overflow: hidden? ¿Le has dado al contenido un height: 100vh al iframe?
    – gugadev
    Commented el 6 mar. 2017 a las 13:56

1 respuesta 1

1

Estás intentando mover un objeto, desde la pagina principal, por lo que al instanciar el objeto, y dándole una posición , lo haces desde el padre, no desde el hijo. (quien es está ejecutando el JS). prueba formateando el objeto desde el iframe. (agregando el script en él)

1
  • Es decir que ésto mismo se hace en el 'continente' y no en el 'contenido', no? Actualmente lo estoy haciendo vía código, en lugar de meterlo como estilo CSS únicamente, por tanto tendría que hacer algo así? var $header = $('#ifrm').contents().find('.ic_header'); $header.css({ 'position': 'fixed', 'top': '0', 'z-index': '10' });
    – Qadesh
    Commented el 6 mar. 2017 a las 12:00

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.