Accessing contents of NativeWindow in a HTML AIR application?

Question

I'm currently building a HTML/JS AIR application. The application needs to display to the user a different 'window' - dependant on whether this is the first time they've launched the application or not. This part is actually fine and I have the code below to do that:

if(!startUp()) { // this simply returns a boolean from a local preferences database that gets shipped with the .air
        // do first time stuff
        var windowOptions = new air.NativeWindowInitOptions();
            windowOptions.systemChrome = 'none';
            windowOptions.type = 'lightweight';
            windowOptions.transparent = 'true';
            windowOptions.resizable = 'false';
        var windowBounds = new air.Rectangle(300, 300, 596, 490);
        var newHtmlLoader = air.HTMLLoader.createRootWindow(true, windowOptions, true, windowBounds);
            newHtmlLoader.load(new air.URLRequest('cover.html'));
}
else {
    // display default window
    // just set nativeWindow.visible = true (loaded from application.xml)
}

However, what I want to be able to do is manipulate the html content from within cover.html after it has loaded up. There seems to be plenty of tutorials online of how to move, resize, etc. the NativeWindow, but I simply want access to the NativeWindow's HTML content.

For example, how would I add a new paragraph to that page? I've tried the following:

newHtmlLoader.window.opener = window;               
var doc = newHtmlLoader.window.opener.document.documentElement;

Using AIR's Introspector console, ....log(doc) returns [object HTMLHtmlElement].

Hmm, seems promising right? I then go on to try:

var p = document.createElement('p');
var t = document.createTextNode('Insert Me');
p.appendChild(t);
doc.appendChild(p);

...but nothing gets inserted. I've also tried the following replacements for doc:

var doc = newHtmlLoader.window.opener.document.body; // .log(doc) -> [object HTMLBodyElement]
var doc = newHtmlLoader.window.opener.document; // .log(doc) -> Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

...as well as the following with jQuery:

$(doc).append('<p>Insert Me</p>'); // again, nothing

So, anyone had any experience in accessing a NativeWindow's inner content programmatically? Any help will be greatly appreciated.

Answer 1

I'm not sure this has the effect you intended:

newHtmlLoader.window.opener = window;               
var doc = newHtmlLoader.window.opener.document.documentElement;

What is does is set var doc = window.document.documentElement;, so 'doc' is your local document, not the one in the other window.

I think what you want is

var doc = newHtmlLoader.window.document.documentElement;

Do note that this will not work until the document has loaded.

Answer 2

Hmm, so I think I may have found out how to do it...If we amend the original code and add an event listener on the loader:

var newHtmlLoader = air.HTMLLoader.createRootWindow(true, windowOptions, true, windowBounds);
newHtmlLoader.addEventListener(air.Event.COMPLETE, doEventComplete);
newHtmlLoader.load(new air.URLRequest('cover.html'));

You can then interact (assuming you're using jQuery) with the contents of the newly created window by using:

function doEventComplete(event) {
    doc = $(event.currentTarget.window.document.body);
    doc.append('<p>Insert Me!</p>')
}

:)