2010-09-20 7 views
19

Je suis actuellement la construction d'une application web dans android. Mon application s'exécute dans une vue Web et charge les contenus tiers via les iframes. La taille de l'iframe est fixe et supposée ne pas être modifiée par le contenu chargé.Webview iframe overflow

Dans le navigateur Chrome de bureau, cela fonctionne très bien et la partie débordement du contenu chargé peut être parcourue via des barres de défilement. Cependant, dans Android WebView, l'iframe a tendance à se redimensionner en fonction du contenu chargé, ce qui conduit à un désordre de la mise en page.

Est-ce que quelqu'un d'autre a rencontré le même problème?

Répondre

0

J'ai trouvé un moyen d'éviter ce vilain problème. J'ai désactivé la barre de défilement de iframe, et utiliser iscroll dans l'application à la place. Cette barre de défilement est presque la même que celle d'origine, bien que plus lente sur mon téléphone HTC Magic.

0

Tony. À mon avis, le point clé de cette astuce est que vous devez fixer la hauteur de l'iframe. Ensuite, vous pouvez appliquer iscroll à n'importe quel élément div dans l'iframe. Voici un petit extrait de code:

// 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> 

J'utilise jQuery dans le code et cela fonctionne bien avec iScroll.

0

J'essayais de montrer un Iframe dans mes applications WebView, j'ai eu le problème de ne pas pouvoir couper les 30 derniers pixels de mon iframe en utilisant CSS 'overflow: hidden;'. La façon dont j'ai contourné ceci était de faire mon propre fichier index.html et de l'enregistrer localement comme un atout dans mon application.

Si vous ne disposez pas d'un dossier « actifs » dans votre projet, passez à l'étape 1

(ce n'est pas le même que le dossier "res)

[Sous Windows 7 ]

Étape 1 - Faire des actifs dossier: Dans votre projet Android studio clic:

fichier -> Nouveau -> dossier -> actif dossier

Image showing how to make assets folder in Windows

Étape 2 - Faire index.html qui tiendra votre <iframes> dans un <div> Vous pouvez copier le code ci-dessous pour utiliser comme exemple de code dans votre fichier 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> 

Étape 3 - Appelez le fichier index.html dans votre WebView

Remarque - (Id de cet exemple WebView est 'main_ad', changer cet identifiant ce que jamais vous avez nommé votre identifiant 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); 

Hope this helps même 1 personne travaillant avec webviews et iframes