Search code examples
iphonewebviewappceleratorappcelerator-mobile

Appcelerator: Webview on iPhone with an iFrame and width

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?

Solution

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