actionscript 3 contentHeight not updating properly

Question

I am using Adobe Flash Builder with actionscript to make a desktop application. I am getting some html code from a webpage and putting it into an mx:html element, then attempting to get the content height in order to determine if I should hide the vertical scrollbar or not. However, when using contentHeight it seems to return the height of the previous state of the element, rather than the one just set.

This is the code to fetch the html page

var htmlPageRequest:URLRequest = new URLRequest(url); 
htmlPageRequest.method = URLRequestMethod.GET; //set request's html request method to GET

htmlPageLoader.addEventListener(Event.COMPLETE, onHtmlLoaded); //listen for page load
htmlPageLoader.load(htmlPageRequest);//when loaded continue logic in new function   

This is the function that is run when the page request is complete

private function onHtmlLoaded(e:Event):void { //logic after html page has loaded 
            HtmlElement.data = htmlPageLoader.data; //set content

            //determine if vscroll bar should be visible
            if(HtmlElement.contentHeight > HtmlElement.height) {
                scrollbar.visible = true; 
            }
            else {
                scrollbar.visible = false;
            }

            trace(HtmlElement.height);
            trace(HTMLELEMENT.contentHeight);
        }

Answer 1

I have realised the solution to the problem:

htmlElement.data = htmlPageLoader.data;

Rendering the HTML takes a certain amount of time - the contentHeight is being accessed before the page has actually rendered, causing the previous value to be returned. In order to fix this, I added an event listener for (htmlRender) in order to not access contentHeight until the rendering is complete.

private function onHtmlLoaded(e:Event):void { //logic after html page has loaded 

        htmlElement.addEventListener(Event.HTML_RENDER, onHtmlRendered); //once the html has rendered, move on
        htmlElement.data = htmlPageLoader.data; //render content                
        }

        private function onHtmlRendered(e:Event):void { //logic for after the page has rendered

            //if the content of the HTML element is bigger than the box, show the scrollbar
            if(htmlElement.contentHeight > htmlElement.height) {
                scrollbar.visible = true; 
            }
            else {
                scrollbar.visible = false;
            }
        }

Answer 2

I am assuming that you are using a URLLoader (htmlPageLoader) instance here to load the webpage into the mx:HTML element, which may not be actually required.

The mx:HTML component actually provides an inbuilt way to load an webpage into itself. This can be done using the location property of the mx:HTML class. It expects a simple string which could be the URL of your webpage you are trying to load.

Once the webpage is loaded, the Event.COMPLETE method is fired, within which you should be able to get your content height properly. So please try the following code:

htmlElement.addEventListener(Event.COMPLETE, onHtmlLoaded);
htmlElement.location = "your URL goes here";

private function onHtmlLoaded(e:Event):void 
{  
    htmlElement.removeEventListener(Event.COMPLETE, onHtmlLoaded);
    trace(htmlElement.contentHeight);
}

I've tried the above with a couple of URL's and it seems to be working fine. Also, I took the liberty of using camel case naming convention for htmlElement. It's just best practice.

Hope this helps. Cheers.