Flex ExternalInterface : possible for ActionScript to interrogate the HTML document?

Question

Is there a way for the Flex app to get any information about the HTML document via the ExternalInterface? Can Flex find out if a particular DIV exists, for example?

Answer 1

Responding to another question I explained how ExternalInterface actually works. What you can take from that is a simple "yes". :)

[edit] some sample code:

var jsFunc:String = 'function () { return document.getElementById("test") != null; }';
var divExists:Boolean = ExternalInterface.call(jsFunc);

should clarify things ... ;)

greetz

back2dos

Answer 2

ExternalInterface is a Javascript interface with the containing page, so anything that is possible in javascript is possible through ExternalInterface, either directly or through functions on the hoast page.

AnnonymousFunctionCall from ExternalInterface

Answer 3

I'm not getting a Comment link, but wanted to thank back2dos for the additional clarification. javascript isn't my usual medium--I forget about anonymous functions.

Answer 4

Is there a way for the Flex app to get any information about the HTML document via the ExternalInterface?

Check out JSInterface - JavaScript API for ActionScript 3. Two front page examples are called:

• JavaScript'ing Inside Flash
• ActionScript'ing Inside HTML

I use this library currently and it is extremely powerful. I asked him (Oleg Galaburda) once whether or not I should use this for simply being able to resize the swf. He said something like "if you only need to do a few in javascript, just stick with ExternalInterface. If you need access to the DOM in ActionScript, use this".

There are hundreds of examples in the svn repository. He's done an awesome job with this thing. It converts JavaScript Objects to ActionScript and back, so you can use full-on classes. It would take a ton of work to rebuild that so it's cross browser and everything. He's done that!

Everything in JSInterface is basically a dynamic class, so you can drill down the DOM easily. Here's some sample methods (in ActionScript):

protected function testCSS():void
{
    var styleTag:JSHTMLElement = JSInterface.pushCSS('.text{font-weight:bold;color:#ff00ff;font-size:90;text-decoration:underline;}');
    var font:JSHTMLElement = JSInterface.document.createElement('font');
    font.innerHTML = 'Hello world!';
    font.setAttribute('class', 'text');
    font.className = 'text';
    JSInterface.document.body.appendChild(font);
    trace(styleTag); 
}                   

protected function insertIFrame():void
{   
    var body:JSDynamic = JSInterface.document.getElementsByTagName('body')[0];
    var frame:JSDynamic = JSInterface.document.createElement("iframe");
    frame.width = 300;
    frame.height = 300;
    if (JSInterface.navigator.appName.indexOf('Microsoft')>=0)
    {
        frame.onreadystatechange = function():void
        {
            trace(frame.readyState);
        };
    }
    else
    {
        frame.onload = function():void
        {
            trace('iFrame loaded');
        };
    }
    frame.src = 'http://actualwave.com';
    body.appendChild(frame);            
}          

The library internally uses ExternalInterface to handle everything. But to serialize/deserialize the DOM to/from ActionScript, that's a ton of work. This library should do the trick.

Hope this helps, Lance