Appcelerator: Webview on iPhone with an iFrame and

Good evening,

I've been having some issues with a view that has a webview inside. The webview is inserting an iframe with an external source (an html on another domain). I'm using an iframe since I need to use the external HTML and I need to communicate with click/touch events with my application.

The main issue is that the webview is inserting unwanted horizontal scroll bars (because the iframe content is too big)

The code looks like:

Webview:

var webview = Titanium.UI.createWebView({
    url: "/html/local.html",
    width:Ti.UI.SIZE,
    height:Ti.UI.SIZE,
    contentWidth:Ti.UI.SIZE,
    contentHeight:Ti.UI.SIZE,
    disableBounce:true,
    enableZoomControls: false
});
self.add(webview);

iframe:

<html>
    <head>
        <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
        <meta http-equiv="cleartype" content="on">
        <script>
            function init () {
                window.theIframe.TiAPI = Ti.API;
                window.theIframe.TiApp = Ti.App;
            }
        </script>               
        <style>
            body {width:100%;margin:0;padding:0;background-color:#ccffff;}
        </style>
    </head>
    <body>
        <iframe name="theIframe" src="http://external.com/something.html" width="100%" height="100%" frameborder="0" onload="init()">
        </iframe>
    </body>
</html>

Things to notice:

This only happens on portrait. It works fine on the iPad or on the iPhone with landscape view.
If, under the external html, I set the max-width for the body to 320px it works perfectly. I won't make it this way because I need it to work under landscape and iPad.
If I use the external html as the URL for the webview, it works too. So it's not an issue with the external content, but with the local html or the webview and the iframe.

Any thought?

回答1:

Maybe in the local HTML file you could turn scrolling off for the iframe. http://www.w3schools.com/tags/att_iframe_scrolling.asp

For example:

<html>
<head>
</head>
<body>
<iframe src="http://www.yahoo.com.au" scrolling="no"></iframe>
</body>

回答2:

I also came across the same problem and actually managed to find a solution

I have no idea why this happens in the first place, but if you want the actual container width on the iframe use this CSS instead:

    iframe {
        min-width: 100%; 
        width: 100px;
        *width: 100%;
    }

回答3:

I ended using media queries on the external file and that works pretty well.

回答4:

It is answered here: iframe size with CSS on iOS

Simply wrap your iframe in a div with:

overflow: auto;
-webkit-overflow-scrolling:touch;

http://jsfiddle.net/R3PKB/7/