Auszug aus dem Buch Apps mit PhoneGap entwickeln

1.1.2 Die Skript-Referenzen

Der zentrale Aspekt bei der Verbindung der Webseite mit PhoneGap ist die Referenz auf die JavaScript-Bibliothek von PhoneGap. Grundsätzlich wird JavaScript bei modernen Webseiten und Web-Applikationen nur in Form von externen Dateien verwendet[4]. Wie üblich verwenden Sie den <script>-Tag mit dem src-Attribut zur Angabe des URLs dieser externen Datei.

Wenn Sie nun aber die HTML-Datei ansehen, die unter dem Visual Studio beim Anlegen eines PhoneGap-Projekts generierte wird, werden Sie erkennen, dass diese Referenz nicht im Header der HTML-Datei, sondern unmittelbar vor dem schließenden Tag des Bodies notiert wird. Das ist kein Zufall, sondern beugt einigen Fehlern vor, die manche Browser beim Aufbau des DOMs haben.

Wenn Sie sich mit der Programmierung im World Wide Web auskennen wissen Sie, dass es beim Zugriff auf die Bestandteile einer Webseite per JavaScript oder einer anderen Skriptsprache über das DOM-Konzept zu Problemen kommen kann, wenn diese Zugriffe mit dem Laden der Webseite einher gehen. Beim Laden (Parsen) der Webseite verarbeiten verschiedene Browser die Webseite unterschiedlich und es kann beim Zugriff auf die Elemente der Webseite vor allen Dingen dann Schwierigkeiten geben, wenn man in einem Skript zu früh auf Elemente einer Webseite zugreifen will – also bevor der Browser den DOM korrekt aufgebaut hat.

Um diesem zu frühen Zugriff Herr zu werden, bieten moderne Web-Frameworks wie das Dojo Toolkit oder jQuery zuverlässige Verfahren. Nutzt man solche Frameworks nicht, muss man den Schutz des DOMs selbst in die Hand nehmen. Im Prinzip steht dazu der Eventhandler onload zur Verfügung, um eine Funktion, die auf den DOM einer Webseite zugreifen möchte, erst nach dem Laden der Webseite (was mit dem Fertigstellen des DOM identisch ist bzw. sein sollte) aufzurufen. Dieser Eventhandler ist jedoch in verschiedenen Browsern fehlerhaft implementiert.

Aus diesem Grund notiert man – wenn man eben ein Framework wie jQuery nicht verwendet – die Skript-Referenz am Ende der Webseite, wenn darin bereits beim Laden der Webseite Zugriffe auf DOM-Elemente erfolgen. Denn bis diese Skriptreferenz vom Browser erreicht wird, ist der Rest der Webseite bereits verarbeitet und damit der DOM fertig. Und das ist der Grund, warum das in der generierten Webseite vom Visual Studio oder auch unter Xcode so gemacht wird.

Nun sollte auffallen, dass in der generierten HTML-Datei noch eine weitere Referenz auf eine externe JavaScript-Datei zu finden ist. Diese ist dafür gedacht, dass Sie Ihren eigenen JavaScript-Code dort unterbringen. Und es ist kein Zufall, dass diese nach der Referenz auf die PhoneGap-Datei notiert wird. Denn Sie werden dort Deklarationen aus dieser PhoneGap-Datei ja verwenden wollen und die müssen vorher bereits verfügbar gemacht werden. Dennoch sollte man festhalten, dass es bei unseren PhoneGap-Apps ja meist darum geht, dass eine lokale HTML-Seite geladen wird und nicht der klassische Fall des Ladens einer Webseite über das Internet vorliegt. Zudem gibt es einen eigenen Eventhandler der beobachtet, ob eine App fertig geladen ist und man auf den DOM zugreifen kann.