android webview iframe overflow

Question

Hi, I'm currently building a web app in android. My app runs in a webview, and loads third-party contents through iframs. 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. Does anyone have encountered the same problem?

Answer 1

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

Answer 2

Hi,

I'm having the exact same problem you described in your question and I've tryed using iscroll, but I can't iscroll to work in an iframe.

How did you do it?

If you could provide a small code-snippet it would be appriciated.

Thanks!

[email protected]

Answer 3

Hi, 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.