2010-02-02 7 views
7

¿Cómo puedo hacer que mi iframe llene la ventana y no muestre ninguna barra de desplazamiento?¿Completa la ventana con iFrame y no muestra las barras de desplazamiento?

Esto funciona para IE6, me gustaría conseguir que funcione para todos los navegadores, si es posible:

<iframe name=iframe1 src="theSiteToShow.html" width="100%" height="100%" frameborder="0" marginheight="10" marginwidth="10"></iframe> 
<script type="text/javascript"> 
function resizeIframe() { 
    var height = document.documentElement.clientHeight; 
    height -= document.getElementById('frame').offsetTop; 

    // not sure how to get this dynamically 
    height -= 20; /* whatever you set your body bottom margin/padding to be */ 

    document.getElementById('frame').style.height = height +"px"; 

}; 
document.getElementById('frame').onload = resizeIframe; 
window.onresize = resizeIframe; 
</script> 
+0

Utilice un 'conjunto de marcos'. ;) – graphicdivine

Respuesta

19

usted debería ser capaz de hacer esto con CSS únicamente, sin ninguna necesidad de Javascript. Las siguientes obras para mí en IE6 +, Google Chrome y Safari:

<style type="text/css"> 
body { 
    margin: 0; 
    overflow: hidden; 
} 
#iframe1 { 
    position:absolute; 
    left: 0px; 
    width: 100%; 
    top: 0px; 
    height: 100%; 
} 
</style> 

<iframe id="iframe1" name="iframe1" frameborder="0" 
    src="theSiteToShow.html"></iframe> 

Sus márgenes de marco deben fijarse en el cuerpo de theSiteToShow.html.

ACTUALIZACIÓN
Tras su comentario, he utilizado la siguiente como una página de prueba:

<html> 
<head> 
<style type="text/css"> 
body { 
    margin: 0; 
    overflow: hidden; 
} 
#iframe1 { 
    position:absolute; 
    left: 0px; 
    width: 100%; 
    top: 0px; 
    height: 100%; 
} 
</style> 
</head> 
<body> 
<iframe id="iframe1" src="http://stackoverflow.com" frameborder="0"></iframe> 
</body> 
</html> 

Probado en IE6 +, Chrome, Safari y Firefox, funciona muy bien y llena toda la ventana.

+0

El iframe no ocupará la ventana. Se colocará en 0,0 en la esquina superior izquierda y tendrá un tamaño de alrededor de 300x150 px. ¿Qué falta? Siente que debería llenar la ventana. – Zolomon

+0

@Zolomon: Mi código funciona bien para mí en IE, Firefox y Chrome. ¿Tal vez podrías copiar el código de prueba que escribí y usarlo como base para construir tu propio código? –

+0

¡Gracias, tus ejemplos funcionan! No sé lo que estaba mal con el mío. – Zolomon

0

Estaba teniendo los mismos problemas con las barras de desplazamiento, así como con el menú Sin contexto apareciendo, aunque todos estos elementos se hayan desactivado. Después de unos días de tratar de resolverlos, tropecé con esta publicación, lo que me ayudó un poco, pero me llevó a encontrar una publicación en webplayers flexibles con tres ejemplos de código. Acá la enlaces:

http://virtualplayground.d2.pl/?p=367#comment-224

Download package

Uso del archivo de índice si desea una hoja en blanco para trabajar desde, reemplace el código existente en el archivo .html exportados (de exportación de la Unidad), reemplace el enlace 'unityObject.embedUnity' con su propio enlace a su archivo .html ubicado en su servidor.

para incrustar el reproductor en su página usando un complemento iframe:

bloqueo y de carga.

Espero que esto ayude.

^_^

Cuestiones relacionadas