How to access an iframe in an Adobe AIR application?

Question

Hello,

I am trying to use the embedded webkit in AIR to write a little browser with HTML+Javascript.

I am so displaying the page at the URL typed by the user in an iframe.

From there, I would like to:

1. access the content of the frame, for example to display the of the page on a tab.
2. be alerted when the user clicked into the frame, for example to update the url bar.

For 1), I know that's forbidden in a browser for security. However, I would guess that this should be possible in an AIR app', may be by asking the user permission (like with Gecko in Firefox).

Does anyone know how to do 1) ? Is there an event or something to do 2) ?

Thanks for your help,

J.

Answer 1

To access the content of the frame

Assuming you have an id ifrm for the iframe:

var html:HTMLLoader = new HTMLLoader();
// ... 
// in the `complete` event handler
trace(html.window.document.getElementById("ifrm").innerHTML); // content

be alerted when the user clicked into the frame

If you can have a javascript event handler to catch modifications to your iframe sub-element, you can call your AS function/event-handler.

You will want to read this :)

Answer 2

Still at the "beginning" of my problem.

Following Dirk advice, I tried to edit a small MXML to use HTMLLoader.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="callBacks()">
    <mx:Script>
     <![CDATA[
       import flash.events.Event;
       import flash.html.HTMLLoader;
       import flash.net.URLRequest;
       import flash.external.ExternalInterface;

       public function u_load(url:String):void {
        var _html:HTMLLoader=new HTMLLoader();
        var urlReq:URLRequest = new URLRequest(url);
        _html.load(urlReq);
        _html.width =1005;
        _html.height=650;
       }
       public function callBacks():void {
        ExternalInterface.addCallback("load",u_load);
       }
     ]]>
    </mx:Script> 
</mx:Application>

What is damn crazy is that this small little code IS NOT COMPILED by mxmlc.exe, producing a error "this type (aka HTMLLoader) can't be found or is not a compilation constant".

Can anyone explain me why it's not working? Is HTMLLoader not included by default in the Flex SDK?

Thanks for your help...

Answer 3

Since Julien sounds like he'll sue me, I'll reply ;)

So, you are not using Flex Builder? If you are, it'll show you the little red dots on your right. Flex Builder is cranky at times, and it helps to close and reopen the solution. And in extreme cases the IDE itself and reloading the project. BTW: did you create a Desktop (AIR) application? HTMLLoader is there for AIR only.

If you are not using the Flex Builder IDE, I suggest you go through this link. It is recommended by Adobe (here).

Your code compiles absolutely fine on my end. However, what confuses me is what you are trying to achieve with ExternalInterface.

Answer 4

Dirk,

What can I do without you;) Are you working for Adobe or something?

I don't have (yet) FB, just using plain basic compiler mxmlc. I did not know that HTMLLoader were working just for AIR!! ;) Using amxmlc compiled it smoothly...

So I am moving on...

By the way the External Interface is to be able to load pages in my frame from my "main" javascript (I am more fluent in JS than in AS3 so want to minimize AS3).

Now, I will add the other way: be able to call a function in my main JS from a function in AS3, dealing with the "COMPLETE" event on the HTMLLoader and passing to JS the string of the HTML I want to read with jQuery.

Answer 5

Hello,

I am moving on my problem.

By digging into the PDF in AirSDK, I found that I can very easily create an HTMLLoader in my Javascript AND register a callback with the following code.

var loadr=air.HTMLLoader.createRootWindow(true);
loadr.addEventListener(air.Event.COMPLETE,function() {
   alert("the page is at "+loadr.location); 
});
loadr.load(new air.URLRequest("http://google.com"));

The main remaining problem is as you can see the only way I found to display the page is in a new window. However, I would like to display the page in my main window. For this, I did not find any way (aka appending the HTMLLoader in the main HTML DOM).

Does anyone have a clue on this?

Thanks for your help!