javascript - not - ios iframe width problem
Problemas de altura IFrame en iOS(safari móvil) (3)
Ejemplo de fuente de página:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Page</title>
</head>
<body>
<div class="main" style="height: 100%;">
<div class="header" style="height: 100px; background-color: green;"></div>
<iframe src="http://www.wikipedia.com"
style="height: 200px; width: 100%; border: none;"></iframe>
<div class="footer" style="height: 100px; background-color: green;"></div>
</div>
</body>
</html>
El problema es que la height de 200px del estilo en línea de IFrames se ignora en el safari móvil:
También me gustaría cambiar la altura del IFrame dinámicamente a través de JavaScript de vainilla que no funciona en absoluto con el siguiente código:
document.getElementsByTagName(''iframe'')[0].style.height = "100px"
El valor del estilo de height se cambia correctamente de acuerdo con las herramientas de desarrollo, pero simplemente se ignora, ya que la altura realmente representada del IFrame no cambia.
Esto solo parece ser un problema en Safari móvil y está funcionando como se esperaba en las últimas versiones de escritorio Safari, Firefox, Chrome, Android, WebView, etc.
Página de prueba: http://devpublic.blob.core.windows.net/scriptstest/index.html
Pd .: Probé esto con varios dispositivos en navegador de pantalla y también tomé las capturas de pantalla allí, ya que no tengo ningún dispositivo de iDD real a la mano.
PROBLEMA:
Yo estaba teniendo el mismo problema. Cambiar el tamaño y el estilo del contenedor div del iframe y agregar scrolling = "no" al iframe no funcionó para mí. Tener un desbordamiento de desplazamiento como el que describe Freya tampoco era una opción, porque los contenidos de mi iframe debían ajustarse según el contenedor principal. Así es como se estructuró mi código iframe original (que no funciona, desbordando su contenedor):
<style>
.iframe-wrapper {
position: relative;
height: 500px;
width: 100%;
}
.iframe {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
</style>
<div class="iframe-wrapper">
<iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe>
</div>
SOLUCIÓN:
Este pequeño truco muy simple de CSS hizo el truco:
<style>
.iframe-wrapper {
position: relative;
height: 500px;
width: 100%;
}
.iframe {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100px;
min-width: 100%;
height: 100px;
min-height: 100%;
}
</style>
<div class="iframe-wrapper">
<iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe>
</div>
Establezca la altura / anchura del iframe en un valor de píxel pequeño y aleatorio. Establezca min-height y min-width en lo que realmente desea que sean el alto / ancho. Esto solucionó completamente el problema para mí.
Se ve así: ¿Cómo lograr que un IFrame responda en iOS Safari?
Los iFrames solo tienen un problema en iOS, por lo que debe adaptar su iframe.
Puede colocar un div envolviendo el iframe, configurar css en el iframe y, lo que funcionó para mí, fue agregar: ponga el atributo scrolling = ''no''.
Te deseo suerte.
Tengo el mismo problema. Y después de probar todas las soluciones que pude encontrar, finalmente encontré cómo resolverlo.
Este problema es causado por el Safari de iOS, que auto-gastará la altura de iframe para adaptarse al contenido de la página.
Si coloca el atributo scrolling = ''no'' en el iframe como <iframe scrolling=''no'' src=''content.html''> , este problema podría resolverse pero el iframe no pudo mostrar el contenido completo de la página, el contenido Lo que sobrepasa el marco será cortado.
Así que necesitamos poner un div que envuelva el iframe y manejar el evento scroll en él.
<style>
.demo-iframe-holder {
width: 500px;
height: 500px;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.demo-iframe-holder iframe {
height: 100%;
width: 100%;
}
</style>
<html>
<body>
<div class="demo-iframe-holder">
<iframe src="content.html" />
</div>
</body>
</html>
referencias:
https://davidwalsh.name/scroll-iframes-ios
¿Cómo hacer que un IFrame responda en iOS Safari?
Espero eso ayude.