Verarbeiten HTML-bezogener Ereignisse in AIR

Adobe AIR 1.0 und höher

Ein Ereignis verarbeitendes System bietet Programmierern eine praktische Möglichkeit, auf Benutzereingaben und Systemereignisse zu reagieren. Das Adobe® AIR®-Ereignismodell ist nicht nur praktisch, sondern erfüllt auch relevante Standards. Basierend auf der Document Object Model (DOM) Level 3 Events Specification (eine Ereignis verarbeitende Architektur gemäß Branchenstandard), bietet das Ereignismodell Programmierern ein leistungsstarkes, intuitives Tool für die Ereignisverarbeitung.

HTMLLoader-Ereignisse

Ein HTMLLoader-Objekt löst die folgenden Adobe® ActionScript® 3.0-Ereignisse aus:

Ereignis

Beschreibung

htmlDOMInitialize

Wird ausgelöst, wenn das HTML-Dokument erstellt wird, aber bevor Skripts geparst oder DOM-Knoten zur Seite hinzugefügt werden.

complete

Wird ausgelöst, wenn das HTML-DOM als Reaktion auf einen Ladevorgang erstellt wurde, sofort nach dem onload -Ereignis in der HTML-Seite.

htmlBoundsChanged

Wird ausgelöst, wenn mindestens eine der Eigenschaften contentWidth und contentHeight geändert wurde.

locationChange

Wird ausgelöst, wenn die location-Eigenschaft des HTMLLoader geändert wurde.

locationChanging

Wird ausgelöst, bevor die HTMLLoader-Position sich nach einer Benutzernavigation, einem JavaScript-Aufruf oder einer Umleitung ändert. Das locationChanging -Ereignis wird nicht ausgelöst, wenn Sie die Methoden load() , loadString() , reload() , historyGo() , historyForward() oder historyBack() aufrufen.

Bei einem Aufruf der preventDefault() -Methode des ausgelösten Ereignisobjekts wird die Navigation abgebrochen.

Wenn ein Link im Systembrowser geöffnet wird, wird kein locationChanging-Ereignis ausgelöst, da die HTMLLoader-Position sich nicht ändert.

scroll

Wird ausgelöst, wenn die HTML-Engine die Bildlaufposition ändert. Scroll-Ereignisse können wegen der Navigation zu Anker-Links ( # -Links) auf der Seite oder aufgrund von Aufrufen der window.scrollTo() -Methode auftreten. Die Eingabe von Text in ein Texteingabefeld oder einen Textbereich kann ebenfalls ein scroll-Ereignis auslösen.

uncaughtScriptException

Wird ausgelöst, wenn eine JavaScript-Ausnahme im HTMLLoader auftritt und die Ausnahme im JavaScript-Code nicht abgefangen wird.

Sie können auch eine ActionScript-Funktion für ein JavaScript-Ereignis (zum Beispiel onClick ) registrieren. Ausführliche Informationen finden Sie unter Verarbeiten von DOM-Ereignissen mit ActionScript .

Verarbeiten von DOM-Ereignissen mit ActionScript

Sie können ActionScript-Funktionen registrieren, um auf JavaScript-Ereignisse zu reagieren. Betrachten Sie zum Beispiel folgenden HTML-Inhalt: 

<html> 
<body> 
    <a href="#" id="testLink">Click me.</a> 
</html>

Sie können eine ActionScript-Funktion als eine Prozedur für jedes beliebige Ereignis auf der Seite registrieren. Der folgende Code fügt zum Beispiel die clickHandler() -Funktion als Listener für das onclick -Ereignis des testLink -Elements auf der HTML-Seite hinzu: 

var html:HTMLLoader = new HTMLLoader( ); 
var urlReq:URLRequest = new URLRequest("test.html"); 
html.load(urlReq); 
html.addEventListener(Event.COMPLETE, completeHandler); 
 
function completeHandler(event:Event):void { 
    html.window.document.getElementById("testLink").onclick = clickHandler; 
} 
 
function clickHandler( event:Object ):void { 
    trace("Event of type: " + event.type ); 
}

Das ausgelöste Ereignisobjekt hat nicht den Typ flash.events.Event oder einer der Event-Unterklassen. Verwenden Sie die Object-Klasse, um einen Typ für das Ereignisprozedurfunktionsargument zu deklarieren.

Sie können diese Ereignisse auch mit der addEventListener() -Methode registrieren. Die completeHandler() -Methode im oben aufgeführten Beispiel lässt sich zum Beispiel durch den folgenden Code ersetzen: 

function completeHandler(event:Event):void { 
    var testLink:Object = html.window.document.getElementById("testLink"); 
    testLink.addEventListener("click", clickHandler); 
}

Wenn ein Listener sich auf ein bestimmtes DOM-Element bezieht, hat es sich bewährt, zu warten, bis der übergeordnete HTMLLoader das complete -Ereignis auslöst, bevor die Ereignis-Listener hinzugefügt werden. HTML-Seiten laden häufig mehrere Dateien und das HTML-DOM wird nicht vollständig aufgebaut, bevor alle Dateien geladen und geparst wurden. Der HTMLLoader löst das complete -Ereignis aus, wenn alle Elemente erstellt wurden.

Antworten auf nicht erfasste JavaScript-Ausnahmen

Betrachten Sie den folgenden HTML-Code: 

<html> 
<head> 
    <script> 
        function throwError() { 
            var x = 400 * melbaToast; 
        } 
    </script> 
</head> 
<body> 
    <a href="#" onclick="throwError()">Click me.</a> 
</html>

Er enthält eine JavaScript-Funktion, throwError() , die auf eine unbekannte Variable verweist, melbaToast : 

var x = 400 * melbaToast;

Wenn eine JavaScript-Operation einen unzulässigen Vorgang erkennt, der im JavaScript-Code nicht mit einer try / catch -Struktur erfasst wird, löst das HTMLLoader-Objekt, das die Seite enthält, ein HTMLUncaughtScriptExceptionEvent-Ereignis aus. Sie können eine Prozedur für dieses Ereignis registrieren wie im folgenden Code: 

var html:HTMLLoader = new HTMLLoader(); 
var urlReq:URLRequest = new URLRequest("test.html"); 
html.load(urlReq); 
html.width = container.width; 
html.height = container.height; 
container.addChild(html); 
html.addEventListener(HTMLUncaughtScriptExceptionEvent.UNCAUGHT_SCRIPT_EXCEPTION, 
                           htmlErrorHandler); 
function htmlErrorHandler(event:HTMLUncaughtJavaScriptExceptionEvent):void  
{ 
    event.preventDefault(); 
    trace("exceptionValue:", event.exceptionValue) 
    for (var i:int = 0; i < event.stackTrace.length; i++) 
    { 
        trace("sourceURL:", event.stackTrace[i].sourceURL); 
        trace("line:", event.stackTrace[i].line); 
        trace("function:", event.stackTrace[i].functionName); 
    } 
}

In JavaScript können Sie dasselbe Ereignis mit der window.htmlLoader-Eigenschaft verarbeiten: 

<html> 
<head> 
<script language="javascript" type="text/javascript" src="AIRAliases.js"></script> 
 
    <script> 
        function throwError() { 
            var x = 400 * melbaToast; 
        } 
         
        function htmlErrorHandler(event) { 
            event.preventDefault(); 
            var message = "exceptionValue:" + event.exceptionValue + "\n"; 
            for (var i = 0; i < event.stackTrace.length; i++){ 
                message += "sourceURL:" + event.stackTrace[i].sourceURL +"\n"; 
                message += "line:" + event.stackTrace[i].line +"\n"; 
                message += "function:" + event.stackTrace[i].functionName + "\n"; 
            } 
            alert(message); 
        } 
         
        window.htmlLoader.addEventListener("uncaughtScriptException", htmlErrorHandler); 
    </script> 
</head> 
<body> 
    <a href="#" onclick="throwError()">Click me.</a> 
</html>

Das htmlErrorHandler() -Ereignis bricht das Standardverhalten des Ereignisses (das im Senden der JavaScript-Fehlermeldung an die AIR-Trace-Ausgabe besteht) ab und generiert seine eigene Ausgabemeldung. Ausgegeben wird der Wert von exceptionValue des HTMLUncaughtScriptExceptionEvent-Objekts. Im stackTrace -Array werden die Eigenschaften aller Objekte ausgegeben: 

exceptionValue: ReferenceError: Can't find variable: melbaToast 
sourceURL: app:/test.html 
line: 5 
function: throwError 
sourceURL: app:/test.html 
line: 10 
function: onclick

Verarbeiten von Laufzeitereignissen mit JavaScript

Die Laufzeitklassen unterstützen das Hinzufügen von Ereignis-Prozeduren mit der addEventListener() -Methode. Um eine Prozedurfunktion für ein Ereignis hinzuzufügen, rufen Sie die addEventListener() -Methode des Objekts auf, das das Ereignis auslöst, und geben Sie dabei den Ereignistyp und die Prozedurfunktion an. Um zum Beispiel auf das closing -Ereignis zu warten, das ausgelöst wird, wenn ein Benutzer auf das Schließen-Feld in der Titelleiste eines Fensters klickt, verwenden Sie die folgende Anweisung: 

window.nativeWindow.addEventListener(air.NativeWindow.CLOSING, handleWindowClosing);

Erstellen einer Ereignisprozedurfunktion

Mit dem folgenden Code wird eine einfache HTML-Datei erstellt, die Informationen über die Position des Hauptfensters anzeigt. Eine Prozedurfunktion, moveHandler() , wartet auf ein move-Ereignis (von der NativeWindowBoundsEvent-Klasse definiert) des Hauptfensters. 

<html> 
    <script src="AIRAliases.js" /> 
    <script> 
        function init() { 
            writeValues(); 
            window.nativeWindow.addEventListener(air.NativeWindowBoundsEvent.MOVE, 
                                                     moveHandler); 
        } 
        function writeValues() { 
            document.getElementById("xText").value = window.nativeWindow.x; 
            document.getElementById("yText").value = window.nativeWindow.y; 
        } 
        function moveHandler(event) { 
            air.trace(event.type); // move 
            writeValues(); 
        } 
    </script> 
    <body onload="init()" /> 
        <table> 
            <tr> 
                <td>Window X:</td> 
                <td><textarea id="xText"></textarea></td> 
            </tr> 
            <tr> 
                <td>Window Y:</td> 
                <td><textarea id="yText"></textarea></td> 
            </tr> 
        </table> 
    </body> 
</html>

Wenn ein Benutzer das Fenster verschiebt, zeigen die Textfeldelemente die aktualisierten X- und Y-Positionen des Fensters an:

Beachten Sie, dass das Ereignisobjekt als Argument an die moveHandler() -Methode übergeben wird. Der event-Parameter ermöglicht der Prozedurfunktion, das Ereignisobjekt zu überprüfen. In diesem Beispiel verwenden Sie die type -Eigenschaft des Ereignisobjekts, um zu melden, dass es sich bei dem Ereignis um ein move -Ereignis handelt.

Entfernen von Ereignisprozeduren

Mit der removeEventListener() -Methode können Sie einen Ereignis-Listener entfernen, den Sie nicht mehr benötigen. Es empfiehlt sich, alle nicht mehr benötigten Listener zu entfernen. Erforderliche Parameter sind eventName und listener , die identisch sind mit den erforderlichen Parametern für die addEventListener() -Methode.

Entfernen von Ereignis-Listenern auf navigierenden HTML-Seiten

Wenn HTML-Inhalt Navigationsvorgänge ausführt oder wenn HTML-Inhalt verworfen wird, da das Fenster mit dem Inhalt geschlossen wird, werden die Ereignis-Listener, die auf Objekte auf der entladenen Seite verweisen, nicht automatisch entfernt. Wenn ein Objekt ein Ereignis für eine Prozedur auslöst, die bereits entladen wurde, wird die folgende Fehlermeldung angezeigt: „The application attempted to reference a JavaScript object in an HTML page that is no longer loaded.“ (Die Anwendung hat versucht, auf ein JavaScript-Objekt auf einer HTML-Seite zu verweisen, die nicht mehr geladen ist.)

Um diesen Fehler zu vermeiden, entfernen Sie JavaScript-Ereignis-Listener auf einer HTML-Seite, bevor sie entladen wird. Bei der Seitennavigation (in einem HTMLLoader-Objekt) entfernen Sie den Ereignis-Listener während des unload -Ereignisses des window -Objekts.

Mit dem folgenden JavaScript-Code wird ein Ereignis-Listener für ein uncaughtScriptException -Ereignis entfernt: 

window.onunload = cleanup; 
window.htmlLoader.addEventListener('uncaughtScriptException', uncaughtScriptException); 
function cleanup() 
{ 
    window.htmlLoader.removeEventListener('uncaughtScriptException', 
                            uncaughtScriptExceptionHandler); 
}

Damit der Fehler nicht beim Schließen von Fenstern mit HTML-Inhalt auftritt, rufen Sie eine Bereinigungsfunktion als Reaktion auf das closing -Ereignis des NativeWindow-Objekts ( window.nativeWindow ) auf. Mit dem folgenden JavaScript-Code wird ein Ereignis-Listener für ein uncaughtScriptException -Ereignis entfernt: 

window.nativeWindow.addEventListener(air.Event.CLOSING, cleanup); 
function cleanup() 
{ 
    window.htmlLoader.removeEventListener('uncaughtScriptException', 
                            uncaughtScriptExceptionHandler); 
}

Sie können diesen Fehler auch verhindern, indem Sie einen Ereignis-Listener entfernen, sobald er ausgeführt wird (falls das Ereignis nur einmal verarbeitet werden muss). Mit dem folgenden JavaScript-Code wird zum Beispiel ein Html-Fenster erstellt, indem die createRootWindow() -Methode der HTMLLoader-Klasse aufgerufen und ein Ereignis-Listener für das complete -Ereignis aufgerufen wird. Wenn die complete -Ereignisprozedur aufgerufen wird, entfernt sie ihren eigenen Ereignis-Listener mit der removeEventListener() -Funktion: 

var html = runtime.flash.html.HTMLLoader.createRootWindow(true); 
html.addEventListener('complete', htmlCompleteListener); 
function htmlCompleteListener() 
{ 
    html.removeEventListener(complete, arguments.callee) 
    // handler code.. 
} 
html.load(new runtime.flash.net.URLRequest("second.html"));

Wenn Sie nicht mehr benötigte Ereignis-Listener entfernen, hat auch der Garbage Collector des Systems die Möglichkeit, den mit diesen Listenern belegten Speicher freizumachen.

Überprüfen auf vorhandene Ereignis-Listener

Mit der hasEventListener() -Methode können Sie prüfen, ob Ereignis-Listener für ein Objekt vorhanden sind.