How to: get Titanium WebView’s content height

I’ve been working with Appcelerator Titanium and, compared to the hell that is native iOS application development, I’ve been quite satisfied so far… except from the occasional bug/glitch that forces me to write some ugly workarounds.

A notable example is when you need to get the content height of a WebView. Let’s say you have two elements inside a single ScrollView: one is a View of any kind with a given height (for example, an ImageView) and the other is a WebView. You want to scroll both the ImageView and the WebView at the same time so, when you slide a finger on the device vertically, the ImageView scrolls up and you see more of the WebView‘s content. Problem is, there is not a contentHeight property on the WebView control and you need that height to set the height property of the WebView to avoid its native scrollbar to be active: if you don’t set an height to the WebView it will display a vertical scrollbar for its own content, hence avoiding the scroll on the external ScrollView.

Fact is, there is actually a way to get the WebView‘s content height: the WebView has an evalJS() method which allows you to execute arbitrary JavaScript inside the WebView (as you would inside a browser). The trick is to ask the WebView for its own document.height and take that as the content’s height, as follows:

 
actualHeight = webView.evalJS("document.height;");
 

The only catch is that you will get the real content height only after the WebView has finished rendering. If you are rendering from an external URL you can use the load() event, which will get called when the page has finished rendering, otherwise you’ll have to set a timer, like this:

 
myTimer = setInterval(function () {
    actualHeight = webView.evalJS("document.height;");
    if(actualHeight > 1)
        {
            webView.height = actualHeight;
            scrollView.contentHeight = imageView.height + webView.height;            
        }
},1000);

and then dispose the timer with myTimer.clearInterval(). Hope this helps!

Advertisements

3 comments

  1. Emanuele · April 19, 2011

    Hi Andrea! How are you? 🙂

    I would like to know your opinion on Appcelerator and on its maturity. Did you evaluate PhoneGap? Why do you choose Appcelerator?

    …it would be nice if you propose a talk about Appcelerator for the webdebs.org 😉

    • andreadallera · April 20, 2011

      Ciao Ema 🙂

      My experience with Titanium has been positive so far: it’s pure bliss compared what iOS native development is. It’s also fairly stable now, a little rough on the edges (the GUI for deploy/testing isn’t very polished) but solid overall.

      The problems start popping up when you want to accomplish something that’s not supported inside Titanium. In that case, your only choice is to go back to Objective-C and code the component that way then wrap it, following their indications, so you can use it from Titanium (I haven’t tried this already).

      I’ve never heard of PhoneGap until now so no, I haven’t tried it. From what it looks like on the website it doesn’t provide a way to use native interface elements, so it wouldn’t have been a viable choice for the projects I’m working on, but it still looks really promising… I’ll give it a try ASAP.

      It would be interesting to talk about Titanium (and other alternative mobile development technologies) at webdebs but you know, I’m a crappy speaker 🙂

  2. Emanuele · April 20, 2011

    ok. Let us know about phonegap if you can.
    Do we meet on 6th may?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s