可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm currently building a web app in android. My app runs in a webview, and loads third-party contents through iframes. The iframe size is fixed and supposed not to be changed by the content loaded.

In desktop Chrome browser, it works fine and the overflow part of loaded content can be scrolled via scrollbars. However, in android webview, the iframe tends to resize itself based on the contents loaded, which leads to a mess of the page layout.

Has anyone else encountered the same problem?

回答1:

Tony. In my opinion, the key point of this trick is that you have to fix the height of the iframe. Then you can apply the iscroll to any div element in the iframe. Here is a small code snippet:

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

I use jQuery in the code and it works well with iScroll.

回答2:

I found out a way to avoid this nasty problem. I've disabled the scrolling bar of iframe, and use iscroll in the application instead. This scrolling bar is nearly the same as the original one, though slower on my HTC Magic phone.

回答3:

I was trying to show an Iframe in my apps WebView, I had the problem of not being able to chop off the bottom 30px of my iframe using CSS 'overflow:hidden;'. The way I got around this was to make my own index.html file and save it locally as an asset within my app.

If you don't have an 'assets' folder within your project, go to step 1

(this is not the same as the 'res' folder)

[On Windows 7]

Step 1 - Make assets folder: In your Android Studio project click:

File --> New --> Folder --> Assets Folder

Image showing how to make assets folder in Windows

Step 2 - Make the index.html that will hold your <iframes> within a <div> You can copy the code below to use as sample code in your index.html file:

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

Step 3 - Call the index.html file in your WebView

Note--(Id of this example WebView is 'main_ad', change this id what what ever you named your webviews id)

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 even 1 person working with webviews and iframes