RSS LinkedIn Twitter

View Source on Flex HTML Control

March 12th, 2011 Categories: AIR, Flex 3, Flex 4, Monkey Patching

There are two ways to load content into Flex’s HTML control. The first is to set assign the htmlText property some HTML. The second is to set the location property to the URL of the site you wish to load. The two are mutually exclusive, as described in the ActionScript 3 Reference here.

Speaking specifically of the htmlText property: Setting this property has the side effect of setting the location property to null, and vice versa.

The implication of this is that if you load content via setting the location property, you cannot use the htmlText property to view the source HTML of the site you loaded– it will return null. So the question is, how do we do this?

The trick is to use the DOM. Adobe has a livedoc article here called Accessing DOM and JavaScript objects from ActionScript. The DOM can be accessed from the window.document property of the HTMLLoader. So assume I have declared the following HTML control.

<mx:HTML id="html" location="http://www.googolflex.com" width="100%" height="100%" />

I could then view the loaded contents in a variety of ways. The HTMLLoader I mentioned previously is a member of the HTML control, and is conveniently named htmlLoader.

var o : Object = html.htmlLoader.window.document.getElementsByTagName("html")[0];
trace( o.textContent );
trace( o.innerText );
trace( o.innerHTML );

All of these methods return Strings, and so could be assigned or output as needed. I found the livedocs article to be pretty illuminating, it essentially gives you a lot of the power of JavaScript using ActionScript in manipulating the HTML that you’ve loaded. You could do some pretty cool stuff with that.

Tags:

One Response to “View Source on Flex HTML Control”

  1. utoyo
    October 27th, 2011 at 02:30
    1

    It works, thanks man. I’ll take you arround Japan if you have chance go here with your Family

    html.htmlLoader.load(new URLRequest(“http://www.google.com”));

    var myObj:Object = html.htmlLoader.window.document.getElementsByName(“q”)[0];
    myObj.value = query.text;

Leave a Comment

*