css - contenido - iframe responsive wordpress
cómo mostrar correctamente un iFrame en un safari móvil (10)
Estoy tratando de mostrar un iframe en mi aplicación web móvil, pero estoy teniendo problemas para restringir el tamaño del iframe a las dimensiones de la pantalla del iPhone. Los atributos de alto y ancho en el elemento iframe parecen no tener ningún efecto, extrañamente. Rodeándolo con un div logra restringirlo, pero luego no puedo desplazarme dentro del iframe.
¿Alguien ha abordado iframes en el safari móvil antes? ¿Alguna idea de por dónde empezar?
El método de Sharon funcionó para mí, sin embargo, cuando se sigue un enlace en el iframe y luego se presiona el botón Atrás del navegador, se carga la versión en caché de la página y el iframe ya no se puede desplazar. Para solucionar esto, utilicé algunos códigos para actualizar la página de la siguiente manera:
if (''ontouchstart'' in document.documentElement)
{
document.getElementById(''Scrolling'').src = document.getElementById(''SCrolling'').src;
}
Esto solo funciona si controla tanto la página externa como la página iframe.
En la página externa, haga que el iframe deslizable.
<iframe src="" height=200 scrolling=no></iframe>
En la página iframe, agregue esto.
<!doctype html>
...
<style>
html, body {height:100%; overflow:hidden}
body {overflow:auto; -webkit-overflow-scrolling:touch}
</style>
Esto funciona porque los navegadores modernos usan html para determinar la altura, por lo que le damos una altura fija y transformamos el body en un nodo desplazable.
He unido el código @ Sharon en lo siguiente, que funciona para mí en el iPad con desplazamiento de dos dedos. Lo único que debe cambiar para que funcione es el atributo src en el iframe (utilicé un documento PDF).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pdf Scrolling in mobile Safari</title>
</head>
<body>
<div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="data/testdocument.pdf" />
</div>
<script type="text/javascript">
setTimeout(function () {
var startY = 0;
var startX = 0;
var b = document.body;
b.addEventListener(''touchstart'', function (event) {
parent.window.scrollTo(0, 1);
startY = event.targetTouches[0].pageY;
startX = event.targetTouches[0].pageX;
});
b.addEventListener(''touchmove'', function (event) {
event.preventDefault();
var posy = event.targetTouches[0].pageY;
var h = parent.document.getElementById("scroller");
var sty = h.scrollTop;
var posx = event.targetTouches[0].pageX;
var stx = h.scrollLeft;
h.scrollTop = sty - (posy - startY);
h.scrollLeft = stx - (posx - startX);
startY = posy;
startX = posx;
});
}, 1000);
</script>
</body>
</html>
Implementé lo siguiente y funciona bien. Básicamente, establezco las dimensiones del cuerpo de acuerdo con el tamaño del contenido de iFrame. Significa que nuestro menú que no es iFrame se puede desplazar fuera de la pantalla, pero de lo contrario, esto hace que nuestros sitios funcionen con iPad y iPhone. "workbox" es la ID de nuestro iFrame.
// Configure for scrolling peculiarities of iPad and iPhone
if (navigator.userAgent.indexOf(''iPhone'') != -1 || navigator.userAgent.indexOf(''iPad'') != -1)
{
document.body.style.width = "100%";
document.body.style.height = "100%";
$("#workbox").load(function (){ // Wait until iFrame content is loaded before checking dimensions of the content
iframeWidth = $("#workbox").contents().width();
if (iframeWidth > 400)
document.body.style.width = (iframeWidth + 182) + ''px'';
iframeHeight = $("#workbox").contents().height();
if (iframeHeight>200)
document.body.style.height = iframeHeight + ''px'';
});
}
La solución es usar Scrolling="no" en el iframe.
Eso es.
No desplace la página IFrame o su contenido, recorra la página principal. Si controla el contenido de IFrame, puede usar la biblioteca iframe-resizer para convertir el elemento iframe en sí mismo en un elemento de nivel de bloque apropiado, con una altura natural / correcta / nativa. Además, no intente ubicar (fijo, absoluto) su iframe en la página principal, o presente un iframe en una ventana modal, especialmente si tiene elementos de formulario.
También sospecho que iOS Safari tiene un comportamiento no estándar que expande la altura de su iframe a su altura natural, al igual que la biblioteca iframe-resizer para los navegadores de escritorio, que parecen mostrar contenido receptivo iframe a una altura de 0px o 150px o alguna otra no es útil por defecto. Si necesita reducir el ancho, pruebe con un estilo de ancho máximo dentro del marco flotante.
Sí, no puedes restringir el propio iframe con alto y ancho. Deberías poner un div alrededor de eso. Si controla el contenido en el iframe, puede colocar algunos JS dentro del contenido del iframe que le indicará al padre que desplace el div cuando se reciba el evento táctil.
Me gusta esto:
El JS:
setTimeout(function () {
var startY = 0;
var startX = 0;
var b = document.body;
b.addEventListener(''touchstart'', function (event) {
parent.window.scrollTo(0, 1);
startY = event.targetTouches[0].pageY;
startX = event.targetTouches[0].pageX;
});
b.addEventListener(''touchmove'', function (event) {
event.preventDefault();
var posy = event.targetTouches[0].pageY;
var h = parent.document.getElementById("scroller");
var sty = h.scrollTop;
var posx = event.targetTouches[0].pageX;
var stx = h.scrollLeft;
h.scrollTop = sty - (posy - startY);
h.scrollLeft = stx - (posx - startX);
startY = posy;
startX = posx;
});
}, 1000);
El HTML:
<div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="url" />
</div>
Si no controla el contenido del iframe, puede usar una superposición sobre el iframe de manera similar, pero luego no puede interactuar con el contenido del iframe que no sea desplazarlo, por lo que no puede, por ejemplo, hacer clic en enlaces en el iframe
Solía ser que podía usar dos dedos para desplazarse dentro de un iframe, pero eso ya no funciona.
Actualización: iOS 6 rompió esta solución para nosotros. He estado intentando obtener una nueva solución, pero nada ha funcionado todavía. Además, ya no es posible depurar javascript en el dispositivo desde que introdujeron Remote Web Inspector, que requiere una Mac para usar.
Si el contenido de iFrame no es suyo, la solución a continuación no funcionará.
Con Android, todo lo que necesita hacer es rodear el iframe con un DIV y establecer la altura en el div en document.documentElement.clientHeight. IOS, sin embargo, es un animal diferente. Aunque todavía no he probado la solución de Sharon, parece una buena solución. Encontré una solución más simple pero solo funciona con IOS 5. +.
Rodee su elemento iframe con un DIV (vamos a llamarlo scroller), establezca el alto del DIV y asegúrese de que el nuevo DIV tenga el siguiente estilo:
$(''#scroller'').css({''overflow'' : ''auto'', ''-webkit-overflow-scrolling'' : ''touch''});
Esto solo funcionará, pero notará que en la mayoría de las implementaciones, el contenido del iframe se queda en blanco al desplazarse y básicamente se vuelve inútil. Según tengo entendido, este comportamiento se informó como un error en Apple desde iOS 5.0. Para sortear ese problema, busque el elemento de cuerpo en el iframe y agregue -webkit-transform '','' translate3d (0, 0, 0) como sigue:
$(''#contentIframe'').contents().find(''body'').css(''-webkit-transform'', ''translate3d(0, 0, 0)'');
Si su aplicación o iframe tiene un uso intensivo de la memoria, es posible que obtenga un desplazamiento en espiral para el que posiblemente necesite usar la solución de Sharon.
Usando puramente MSchimpf y el código de Ahmad, hice ajustes para poder tener el iframe dentro de un div, por lo tanto, mantener un encabezado y pie de página para el botón Atrás y la marca en mi página. Código actualizado:
<script type="text/javascript">
$("#webview").bind(''pagebeforeshow'', function(event){
$("#iframe").attr(''src'',cwebview);
});
if (navigator.userAgent.indexOf(''iPhone'') != -1 || navigator.userAgent.indexOf(''iPad'') != -1)
{
$("#webview-content").css("width","100%");
$("#webview-content").css("height","100%");
$("#iframe").load(function (){ // Wait until iFrame content is loaded before checking dimensions of the content
iframeWidth = $("#iframe").contents().width();
if (iframeWidth > 400)
$("#webview-content").css("width",(iframeWidth + 182) + ''px'');
iframeHeight = $("#iframe").contents().height();
if (iframeHeight>200)
$("#webview-content").css("height",iframeHeight + ''px'');
});
}
</script>
y el html
<div class="header" data-role="header" data-position="fixed">
</div>
<div id="webview-content" data-role="content" style="height:380px;">
<iframe id="iframe"></iframe>
</div><!-- /content -->
<div class="footer" data-role="footer" data-position="fixed">
</div><!-- /footer -->
<div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" src="url" />
</div>
Estoy construyendo mi primer sitio y esto me ayudó a hacer que esto funcione para todos los sitios en los que utilizo el iframe embebido.
¡Gracias!