html - bootstrap - Altura automática para Iframe que contiene Google Docs incrustado/publicado
iframe width (5)
Tengo un iframe con un documento de Google publicado. Los contenidos de ese documento están sujetos a cambios, por lo que quiero ajustar automáticamente el alto del iframe en función de su contenido. Encontré algunas soluciones para esto, pero todas requieren acceso al encabezado del documento secundario. ¿Alguien tiene una idea sobre cómo hacer esto?
Puede ver un extracto del código que uso a continuación:
#faq{
height: 800px;
overflow: hidden;
position: relative;
width: 660px;
border-top: 1px solid #90C547;
border-bottom: 1px solid #90C547;
}
<div id="faq"><iframe id="faqif" src="https://docs.google.com/document/..../pub?embedded=true" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:900px;width:832px;position:absolute;top:-92px;left:-150px;right:0px;bottom:0px;z-index:0;" height="900px" width="832px"></iframe></div>
Respuesta simple ... no puedes
(lo siento)
La razón se debe a la política de dominio cruzado ( más información ) que no puede acceder al documento de iframe secundario y, por lo tanto, determinar su height para cambiar el tamaño del iframe consecuencia, simplemente ponga
En informática, la política del mismo origen es un concepto importante en el modelo de seguridad de la aplicación web. La política permite que las secuencias de comandos que se ejecutan en páginas que se originan en el mismo sitio (una combinación de esquema, nombre de host y número de puerto) accedan a su DOM sin restricciones específicas, pero impide el acceso a DOM en diferentes sitios.
[...]
Si no tiene control sobre el sitio enmarcado, no puede eludir la política de dominios cruzados.
Y si no puede hacer esto, no puede hacer lo que quiera porque no hay forma de determinar la altura del documento secundario.
Parece que la razón por la que quieres hacer esto es relacionada con el diseño. Como tal, es posible que desee ver diferentes formas de implementar el contenido (iframe) dentro de su sitio, siendo la más obvia la restricción natural en la altura de la altura de la vista del navegador, quizás por lo tanto haga que el iframe 100% de la ventana gráfica (html, ¿peso corporal? Aunque esto interferirá con su diseño si hay otros componentes en la página ... pero hay alternativas ... el iframe podría:
Estar alineado a un lado de la página con un conjunto de altura del 100%
Situarse dentro de una ventana emergente o modal con 100% de alto / ancho
Ser controlado (JS) para estirar con la ventana principal, tal vez con un
bottomfijo
También recuerde que, debido a que esta es una restricción global sobre este tipo de contenido, los usuarios no están completamente acostumbrados a verlo, de modo que, aunque no es una opción de diseño ideal, no necesariamente confundirá / sorprenderá a los visitantes de su sitio.
¡La primera respuesta aquí funcionó para mí! Iframe de pantalla completa con una altura de 100%
<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>
No hay forma actual de hacer esto.
Sin embargo, puede aumentar la altura y ocultar los bordes, de esta forma la barra de desplazamiento del marco flotante no aparecerá y el documento parecerá ser parte de su sitio web.
La mala noticia es que la política de dominio cruzado no te permitirá hacerlo de ninguna manera. Pasé un par de horas tratando de evitar el problema, que incluía:
- Creando un DIV padre y ajusta el iframe en él
- Intentando redimensionar dinámicamente el DIV padre
- Intentando encontrar una biblioteca para calcular la altura en el lado del servidor
- y muchos de google
El mejor enfoque es usar una biblioteca disponible .
Descargue el archivo ZIP de la siguiente URL y siga las sencillas instrucciones de instalación escritas allí.
http://davidjbradshaw.github.io/iframe-resizer/
Parece prometedor, pero no puedo probarlo yo mismo. Échale un vistazo y publica comentarios si necesitas ayuda.
#faq{
position: relative;
width: 832px;
border-top: 1px solid #90C547;
border-bottom: 1px solid #90C547;
height: 100%
}
#faqif{}
.bgcolor_patch{position: absolute; right: 0; top:0; height: 100%; width: 20px; background: #fff; }
$(document).ready(function(){
$("iframe").load( function () {
var c = (this.contentWindow || this.contentDocument);
if (c.document) d = c.document;
var ih = $(d).outerHeight();
var iw = $(d).outerWidth();
$(this).css({
height: ih,
width: iw
});
});
});
<div id="faq"><iframe id="faqif" src="https://docs.google.com/document/..../pub?embedded=true" height="100%" width="832px" frameborder="0"></iframe>
<div class="bgcolor_patch"></div>
</div>