Question

Is it possible to get the x,y coordinates of a Flex app within an HTML page? I know you can use ExternalInterface.ObjecID to get the ‘id attribute of the object tag in Internet Explorer, or the name attribute of the embed tag in Netscape’ but I can’t seem to get past that step. It seems like it should be possible to get a handle on that embed object. Any suggestions?

Thanks.

Answer 1

I think the easiest thing to do is to include some kind of JavaScript library on the HTML page, say jQuery, and use it’s functions for determining the position and size of DOM nodes. I would do it more or less like this:

var jsCode : String = 'function( id ) { return $('#' + id).offset(); }';  var offset : Object = ExternalInterface.call(jsCode, ExternalObject.objectID);  trace(offset.left, offset.top); 

Notice that this is ActionScript code, but it runs JavaScript code through ExternalInterface. It uses jQuery and in particular its offset method that returns the left and top offset of a DOM node.

You could do without jQuery if you looked at how the offset method is implemented and included that code in place of the call to jQuery. That way you wouldn’t need to load jQuery in the HTML and the Flex app would be self-contained. The reason I suggest to use a library like jQuery is that browsers do these things differently. I’m not sure if calculating offsets is very different from browser to browser, but it doesn’t hurt to be insulated from browser differences.

The JavaScript in my example is an anonymous function so that the ID of the embed/object tag can be passed in to it as a parameter to ExternalInterface.call, but you could just use string concatenation if you want:

var jsCode : String = '$('#' +' + ExternalInterface.objectID + ').offset()';  var offset : Object = ExternalInterface.call(jsCode); 

That would work too, I just think the first version is more elegant.