javascript - pagina - Iframe de pantalla completa con una altura del 100%.
iframe responsive (15)
<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>
¿El iframe height = 100% es compatible con todos los navegadores?
Estoy usando doctype como:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
En mi código iframe, si digo:
<iframe src="xyz.pdf" width="100%" height="100%" />
Quiero decir, ¿tomará realmente la altura de la página restante (ya que hay otro marco en la parte superior con una altura fija de 50px)? ¿Se admite esto en todos los navegadores principales (IE / Firefox / Safari)?
También con respecto a las barras de desplazamiento, aunque digo scrolling="no" , puedo ver las barras de desplazamiento deshabilitadas en Firefox ... ¿Cómo oculto completamente las barras de desplazamiento y configuro la altura del iframe automáticamente?
Otra forma de construir iframe pantalla completa fluido:
El video incorporado ocupa toda el área de la viewport cuando se carga la página
Buen enfoque para páginas de destino con video o cualquier contenido incrustado. Puede tener cualquier contenido adicional debajo del video incrustado, que se revela cuando se desplaza la página hacia abajo.
Ejemplo:
Código CSS y HTML.
body {
margin: 0;
background-color: #E1E1E1;
}
header {
width: 100%;
height: 56vw;
max-height: 100vh;
}
.embwrap {
width: 100%;
height: 100%;
display: table;
}
.embwrap .embcell {
width: auto;
background-color: black;
display: table-cell;
vertical-align: top;
}
.embwrap .embcell .ifrwrap {
height: 100%;
width: 100%;
display: inline-table;
background-color: black;
}
.embwrap .embcell .ifrwrap iframe {
height: 100%;
width: 100%;
}
<header>
<div class="embwrap">
<div class="embcell">
<div class="ifrwrap">
<iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&modestbranding=1&iv_load_policy=3&showsearch=0&rel=1&controls=1&showinfo=1&fs=1"></iframe>
</div>
</div>
</div>
</header>
<article>
<div style="margin:30px; text-align: justify;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p>
<p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p>
</div>
</article>
3 enfoques para crear un iframe pantalla completa:
Enfoque 1 - longitudes de porcentaje de vista
En los navegadores compatibles , puede utilizar longitudes de porcentaje de vista como
height: 100vh.Donde
100vhrepresenta la altura de la ventana100vw, e igualmente100vwrepresenta el ancho.body { margin: 0; /* Reset default margin */ } iframe { display: block; /* iframes are inline by default */ background: #000; border: none; /* Reset default border */ height: 100vh; /* Viewport-relative units */ width: 100vw; }<iframe></iframe>
Enfoque 2 - Posicionamiento fijo
Este enfoque es bastante sencillo. Solo configure la posición del elemento
fixedy agregue unaheight/widthdel100%.iframe { position: fixed; background: #000; border: none; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }<iframe></iframe>
Enfoque 3
Para este último método, simplemente configure la
heightde los elementos debody/html/iframeen100%.html, body { height: 100%; margin: 0; /* Reset default margin on the body element */ } iframe { display: block; /* iframes are inline by default */ background: #000; border: none; /* Reset default border */ width: 100%; height: 100%; }<iframe></iframe>
1. Cambie su DOCTYPE a algo menos estricto. No uses XHTML; es tonto Solo usa el doctype HTML 5 y eres bueno:
<!doctype html>
2. Es posible que deba asegurarse (según el navegador) de que el padre del iframe tenga una altura. Y su padre. Y su padre. Etc:
html, body { height: 100%; }
Adicional a la respuesta de Akshit Soota: es importante establecer explícitamente la altura de cada elemento padre, también de la tabla y la columna, en su caso:
<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">
<table style="width: 100%; height: 100%" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="left" height="100%">
<iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;"
width="100%" height="100%" frameborder="0" scrolling="no"
src="http://www.youraddress.com" ></iframe>
</td>
Aquí hay un código conciso. Se basa en un método jquery para encontrar la altura de la ventana actual. En la carga de iFrame, establece que la altura del iframe sea la misma que la ventana actual. Luego, para manejar el cambio de tamaño de la página, la etiqueta del cuerpo tiene un controlador de eventos onresize que establece la altura del marco cada vez que se cambia el tamaño del documento.
<html>
<head>
<title>my I frame is as tall as your page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$(''#iframe1'').attr(''height'', $(window).height());" style="margin:0;" >
<iframe id="iframe1" src="yourpage.html" style="width:100%;" onload="this.height=$(window).height();"></iframe>
</body>
</html>
Aquí hay una muestra de trabajo: http://jsbin.com/soqeq/1/
El siguiente trabajo probado
<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>
Esto me funcionó muy bien (solo si el contenido de iframe proviene del mismo dominio ):
<script type="text/javascript">
function calcHeight(iframeElement){
var the_height= iframeElement.contentWindow.document.body.scrollHeight;
iframeElement.height= the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>
Me encontré con el mismo problema, estaba tirando de un iframe en un div. Prueba esto:
<iframe src="http://.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>
La altura se establece en 100vh, que representa la altura de la ventana gráfica. Además, el ancho podría establecerse en 100vw, aunque es probable que tenga problemas si el archivo de origen responde (su marco se volverá muy ancho).
Podría usar el conjunto de marcos como los estados de respuesta anteriores, pero si insiste en usar iFrames, los 2 ejemplos siguientes deberían funcionar:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>
Una alternativa:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>
Para ocultar el desplazamiento con 2 alternativas como se muestra arriba:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>
Hack con el segundo ejemplo:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>
Para ocultar las barras de desplazamiento del iFrame, el padre se overflow: hidden para ocultar las barras de desplazamiento y el iFrame está diseñado para alcanzar un ancho y una altura de hasta el 150%, lo que fuerza las barras de desplazamiento fuera de la página y, como el cuerpo no tiene puede que las barras de desplazamiento no puedan esperar que el iframe exceda los límites de la página. ¡Esto oculta las barras de desplazamiento del iFrame con ancho completo!
Según https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe , los valores de porcentaje ya no están permitidos. Pero lo siguiente me funcionó
<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>
Aunque el width:100% funciona, la height:100% no funciona. Así que se ha usado window.innerHeight . También puede utilizar píxeles css para la altura.
Solo esto funcionó para mí (pero para "mismo dominio"):
function MakeIframeFullHeight(iframeElement){
iframeElement.style.width = "100%";
var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height ); // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
if(margins=="") { margins=0; ifrD.body.style.margin="0px"; }
(function(){
var interval = setInterval(function(){
if(ifrD.readyState == ''complete'' ){
iframeElement.style.height = (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
setTimeout( function(){ clearInterval(interval); }, 1000 );
}
},1000)
})();
}
puede utilizar cualquiera de
MakeIframeFullHeight(document.getElementById("iframe_id"));
o
<iframe .... onload="MakeIframeFullHeight(this);" ....
Este es un gran recurso y ha funcionado muy bien, las pocas veces que lo he usado. Crea el siguiente código ....
<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class=''embed-container''>
<iframe src=''http://player.vimeo.com/video/66140585'' frameborder=''0'' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
Primero agregas css
html,body{
height:100%;
}
Este será el html:
<div style="position:relative;height:100%;max-width:500px;margin:auto">
<iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
body {
margin: 0; /* Reset default margin */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}
<iframe></iframe>