Webview iframe overflow

Actualmente estoy compilando una aplicación web en android. Mi aplicación se ejecuta en una vista web y carga contenido de terceros a través de iframes. El tamaño del iframe es fijo y se supone que no debe ser modificado por el contenido cargado.Webview iframe overflow

En el navegador Chrome de escritorio, funciona bien y la parte de desbordamiento del contenido cargado se puede desplazar mediante barras de desplazamiento. Sin embargo, en la vista web de Android, el iframe tiende a cambiar el tamaño en función de los contenidos cargados, lo que genera un desorden en el diseño de la página.

¿Alguien más ha tenido el mismo problema?

Fuente

2010-09-20 Felix Chan

Encontré una manera de evitar este desagradable problema. Inhabilité la barra de desplazamiento de iframe y, en su lugar, uso iscroll en la aplicación. Esta barra de desplazamiento es casi la misma que la original, aunque más lenta en mi teléfono HTC Magic.

Fuente

2010-10-04 01:49:28

Tony. En mi opinión, el punto clave de este truco es que tienes que arreglar la altura del iframe. Luego puede aplicar el iscroll a cualquier elemento div en el iframe. He aquí un pequeño fragmento de código:

// disable default touchmove handler 
    document.addEventListener('touchmove', function(e){ 
     e.preventDefault(); 
    }); 
    // make the div 'list' scrollable 
    var myScroll = new iScroll('list'); // <div id='list'>Blah</div>

utilizo jQuery en el código y funciona bien con iScroll.

Fuente

2010-10-23 15:46:49

yo estaba tratando de mostrar un iframe en mi aplicaciones WebView, que tenía el problema de no ser capaz de cortar la parte inferior de 30px de mi iframe usando CSS 'overflow: hidden;'. La forma en que solucioné esto fue crear mi propio archivo index.html y guardarlo localmente como un activo dentro de mi aplicación.

Si usted no tiene una carpeta de 'activos' dentro de su proyecto, vaya al paso 1

(esto no es lo mismo que la carpeta 'res')

[En Windows 7 ]

Paso 1 - Hacer activos carpeta: En su proyecto Android Studio clic:

archivo -> Nuevo -> carpeta -> carpeta activos

Image showing how to make assets folder in Windows

Paso 2 - Hacer que el index.html que llevará a cabo su <iframes> dentro de un <div> Puede copiar el siguiente código para utilizar como código de ejemplo en el archivo index.html:

<!DOCTYPE html> 
    <html> 
    <head> 
     <title></title> 
     <meta charset="utf-8" /> 
    </head> 
    <body style="margin:0px;"> 
     <div style="width:605px;height:875px;overflow:hidden;"> 
      <iframe src="https://docs.google.com/presentation/d/1QyNNURCVBme50SAuIceq3sh7Ky74LuWNeEM8B910aC4/embed?start=true&loop=true&delayms=2000" scrolling="no" frameborder="0" width="605" height="905" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe> 
     </div> 
    </body> 
</html>

Paso 3 - Llamar el archivo index.html en su WebView

Nota - (Id de este ejemplo es WebView 'main_ad', cambiar este id lo que lo que nunca ha asignado el nombre Identificación del webviews)

WebView webView = (WebView) findViewById(R.id.main_ad); 
webView.setWebViewClient(new WebViewClient()); 
webView.loadUrl("file:///android_asset/index.html"); //this is why you needed the assets folder 
webView.getSettings().setJavaScriptEnabled(true);

Esperanza esto ayuda incluso 1 persona que trabaja con webviews e iframes

Fuente

2017-01-06 11:24:38 Tyrant911

Respuesta

Cuestiones relacionadas