Windows Dev Center

HTML, CSS und JavaScript – Features und Unterschiede (HTML)

Die Windows-Runtime-Apps, die die JavaScript-Plattform verwenden, ermöglichen es Ihnen, Apps mit HTML, CSS und JavaScript zu erstellen. Die Programmierung von Windows-Runtime-Apps ist in vielerlei Hinsicht mit dem Schreiben von Markup und Code für eine Website identisch. Die Windows-Runtime-Apps mit JavaScript bieten darüber hinaus aber weitere Features und bringen einige Änderungen hinsichtlich der Verwendung bestehender HTML-Features mit sich. Die Unterschiede werden wir hier vorstellen.

Voraussetzungen

HTML-Unterstützung

Windows-Runtime-Apps, die JavaScript verwenden, unterstützen die meisten HTML5-Features, z. B. die Elemente canvas, SVG, video und audio. Sie unterstützen auch die meisten Cascading Stylesheets, Level 3 (CSS3)-Features, z. B. 2D- und 3D-Transformationen, Übergänge und Animationen.

Grundsätzlich ist das Schreiben von HTML-Code für Windows-Runtime-Apps mit JavaScript dem Schreiben von HTML-Code für Internet Explorer 11 im Standards-Modus sehr ähnlich. Es gibt jedoch auch einige Unterschiede. In den folgenden Abschnitten wird beschrieben, welche interessanten neuen Features Windows-Runtime-Apps mit JavaScript bieten und inwiefern sich die Funktionsweise einiger bestehender HTML- und DOM-APIs davon unterscheidet.

Zusätzliche Features

Windows-Runtime-Apps mit JavaScript bieten viele neue Features, mit denen Sie Ihre Apps verbessern können:

  • Erweiterter Support für Berührungseingaben
  • Mehr Gestaltungsmöglichkeiten für Ihre Benutzeroberfläche

    Windows-Runtime-Apps mit JavaScript stellen zusätzliche designfähige Komponenten, so genannte Teile, für viele der bereits vorhandenen HTML-Steuerelemente sowie für alle neuen Steuerelemente aus der Windows-Bibliothek für JavaScript bereit. Diese Teile machen die Gestaltung und Konzeption der Steuerelemente flexibler. Weitere Informationen zur Gestaltung von Steuerelementen finden Sie unter Schnellstart: Formatieren von Steuerelementen.

  • Zugriff auf Windows-Runtime

    Die Windows-Runtime ist eine Gruppe von APIs, die für Windows-Runtime-Apps entwickelt wurden und Netzwerkfunktionalität, eine verbesserte XML-Analyse, den Zugriff auf das System und Geräte und vieles mehr bereitstellen. Eine vollständige Liste der Funktionen der Windows-Runtime finden Sie in der Windows-Runtime-Referenz.

    Sie können Windows-Runtime auch verwenden, um eigene Bibliotheken in C#, Visual Basic oder C++ zu schreiben. Auf diese Bibliotheken können Sie dann mithilfe von JavaScript in Ihrer Windows-Runtime-App mit JavaScript zugreifen.

  • Steuerelemente, z. B. DatePicker, TimePicker und ListView, eine Datensteuerung, die umfassend angepasst werden und eine Bindung zu verschiedenen Datentypen herstellen kann, einschließlich XML und Webdienste. Diese Steuerelemente sind Bestandteil der WinJS (WinJS).

    Eine vollständige Liste finden Sie unter Liste der Steuerelemente.

  • Öffnen Sie die WinJS.

    Bei der WinJS handelt es sich um einen Satz von JavaScript- und CSS-Dateien zur einfacheren Erstellung von Windows-Runtime-Apps mit JavaScript. Sie wird zusammen mit HTML, CSS und der Windows-Runtime für die App-Erstellung verwendet.

Windows-Runtime-Objekte

Windows-Runtime stellt APIs bereit, die einen tiefer greifenden Systemzugang ermöglichen. Sie können Ihre eigenen benutzerdefinierten Objekte für Ihr Projekt in C#, VB und C++ schreiben und als Codebibliothek in Ihr Projekt einfügen.

Unterschiede

Ganz grundsätzlich funktionieren HTML- und DOM-APIs so, wie sie es in Windows Internet Explorer im Standards-Modus tun. Doch es gibt ein paar Unterschiede. Einige dieser Unterschiede sind durch die Ausführung in der Windows-Shell bedingt, die steuert, welche Arten von Fenstern Sie öffnen können. Andere Unterschiede sind auf das Sicherheitsmodell von Windows Store-Apps mit JavaScript zurückführen.

Erstellen und Bearbeiten von Fenstern

Windows: Erstellen und Bearbeiten von Fenstern:  

Die aktive App belegt in der Windows-Shell ein einzelnes Fenster, durch das der größte Teil des Bildschirms ausgefüllt ist. Sie können weder neue Fenster erstellen noch vorhandene Fenster in der Größe verändern oder verschieben.

Arbeiten mit dem window-Objekt

Einige Methoden des window-Objekts, wie alert, prompt, open, moveBy, moveTo, resizeBy und resizeTo funktionieren in Windows-Runtime-Apps mit JavaScript nicht. Eine Seite, die im lokalen Kontext ausgeführt wird, kann window.close zum Beenden der App verwenden, sollte dies aber nur bei einem nicht behebbaren Fehler tun. Seiten, die im Webkontext ausgeführt werden, können window.close nicht verwenden.

Einfache Navigation

Eine der einfachsten und am häufigsten verwendeten Formen der Navigation ist der Hyperlink. Der Code, den Sie hier sehen, erzeugt einen Hyperlink, der zu page2.html navigiert.


<p><a href="page2.html">Go to page 2</a></p>

Da es sich um einen relativen Link handelt, geht das System davon aus, dass page2.html eine lokale Seite ist, die zu Ihrer App gehört. Wenn Sie auf den Link klicken, gelangen Sie zu page2.html. Lokale Seiten wie page2.html führen den lokalen Kontext aus.

Im nächsten Beispiel wird ein Link zur externen Website www.bing.com hinzugefügt:


<p><a href="ms-appx:///page2.html">Go to page 2</a></p>
<p><a href="http://www.bing.com">Search the web</a></p>


Wenn Sie auf den zweiten Link klicken, passiert etwas Unerwartetes—der Link wird im Webbrowser anstatt in Ihrer Anwendung geöffnet. Das gilt aber nicht für den ersten Link, der sehr wohl in der Anwendung geöffnet wird.

Der Grund dafür ist, dass Windows-Runtime-Apps mit JavaScript keine Navigation auf oberster Ebene zu einer externen Seite durchführen. Sie können externe Webseiten nur in einem WebView-Steuerelement oder iframe anzeigen. Weitere Informationen hierzu finden Sie unter Erstellen von Links zu externen Webseiten. Weitere Informationen über die verschiedenen Protokolle, die Sie zur Erstellung von Links verwenden können (z. B. ms-appx:/// und ms-appx-web:///), finden Sie unter Erstellen von Verweisen auf Inhalt.

Seiten mit lokalem und mit Webkontext

Um einige der Unterschiede zwischen der Funktionsweise von Markup und Code im Browser und in einer Windows-Runtime-App mit JavaScript verstehen zu können, müssen Sie zunächst den Unterschied zwischen dem lokalen Kontext und dem Webkontext kennen.

Eine Windows-Runtime-App mit JavaScript enthält mindestens eine HTML-Seite. Diese Seite wird, ebenso wie andere Seiten, die Sie in die App einfügen, grundsätzlich im lokalen Kontext der App ausgeführt. Wenn Sie ein iframe-Element zur Navigation zu einer Remoteseite verwenden, wird diese Seite im Webkontext ausgeführt und hat nur beschränkten Zugriff auf Ihr System.

Über den ApplicationContentUriRules-Abschnitt des Paketmanifests der App können Sie einer Seite im Webkontext Zugriff auf die Geolocation-Geräte Ihres Systems (sofern die App die Berechtigung zum Zugriff auf diese Funktion hat) und auf die Zwischenablage gewähren.

Zwar können Webkontextseiten auf mehr Bereiche des Systems zugreifen als andere externe Seiten, aber der Zugriff von Seiten im lokalen Kontext ist weiter gefasst. Beispielsweise kann eine Seite im Webkontext nicht auf die Windows-Runtime zugreifen, eine Seite im lokalen Kontext aber schon. Weitere Informationen über Unterschiede zwischen dem lokalen und dem Webkontext finden Sie unter Features und Einschränkungen nach Kontext.

Navigationsmodelle

Fast alle Websites beinhalten eine Art der Navigation, meist in Form von Hyperlinks, auf die Sie klicken, um zu einer anderen Seite zu gelangen. Jede Seite enthält einen eigenen Satz von JavaScript-Funktionen und -Daten, einen neuen HTML-Satz für die Anzeige, Stilinformationen usw. Dieses Navigationsmodell wird als mehrseitige Navigation bezeichnet.

Ein weiteres Navigationsmodell ist die Einzelseitennavigation, bei der Sie eine einzelne Seite Ihrer App verwenden und bei Bedarf weitere Daten in diese Seite laden. Auch hier teilen Sie Ihre App auf mehrere Dateien auf, aber anstatt von Seite zu Seite zu wechseln, lädt Ihre App weitere Dokumente (mit Page- oder HtmlControl-Objekten) in die Hauptseite. Da die Hauptseite Ihrer App nie entladen wird, werden auch Ihre Skripts nie entladen. Die Verwaltung von Aktivierung, Zustand und Animationen wird dadurch erleichtert. Wenn Benutzer Ihre App ausführen, erleben sie eine Benutzerfreundlichkeit, wie Sie sie von Anwendungen kennen. Beim Laden neuer Seiten entstehen keine Pausen, und es wird nie ein leerer Bildschirm angezeigt. Wir empfehlen, für Windows Store-Apps mit JavaScript das Modell der Einzelseitennavigation zu verwenden.

Asynchrone Funktionen

Um das Reaktionsverhalten der App zu verbessern, werden viele Funktionen der WinJS und von Windows Runtime asynchron ausgeführt. Auf diese Weise kann die App Vorgänge im Hintergrund ausführen und gleichzeitig weiter auf Benutzerinteraktionen reagieren. Anstatt direkt einen Wert zurückzugeben, gibt eine asynchrone Funktion eine Promise für einen Wert zurück. Weitere Informationen zur asynchronen Programmierung finden Sie unter Asynchrone Programmierung in JavaScript.

Dynamisches Hinzufügen von HTML

Der Systemzugriff einer Seite im lokalen Kontext Ihrer App ist umfassender als der anderer Seiten (oder „Web-Kontext-Seiten“). Sie kann auf die Windows-Runtime und vielleicht auch auf das Dateisystem und Ihre Geräte zugreifen. Letzteres hängt davon ab, welche Berechtigungen für die App erteilt wurden. Daher ist es wichtig, die Ausführung von Schadsoftware zu verhindern.

Zum Schutz gegen Skripteinschleusungen und zur Abschirmung Ihres Systems vor möglicher Schadsoftware wird HTML-Code, den Sie im lokalen Kontext in eine Seite einfügen, so gefiltert, als würde er von der toStaticHTML-Methode verarbeitet. Wenn HTML-Code mit einem unbekannten Element, Ereignishandler, Skript oder Skriptverweis oder einem unbekannten CSS-Pseudoelement und einer unbekannten Pseudoklasse eingeschleust wird, wird eine Ausnahme ausgelöst, sobald Sie den HTML-Code dem DOM der Seite hinzufügen.

Diese Sicherheitseinschränkung hat Auswirkungen auf die folgenden Eigenschaften und Methoden:

Sie können diese Sicherheitseinschränkung aber umgehen. Dies sollte jedoch nur bei vertrauenswürdigem Inhalt geschehen, der keinen Remotewebinhalt enthält, den Sie nicht prüfen können. Mit den folgenden Funktionen können Sie den Filter für sichere HTML umgehen:

  • createElement

    Erstellt explizit neue Elemente, die Sie dem DOM hinzufügen können. Da Sie jedes Element explizit erstellen, wird der Filter für sichere HTML nicht darauf angewendet. Wenn Sie so vorgehen, müssen Sie absolut sicher sein, was Sie da hinzufügen. Es darf kein Risiko bestehen, dass versehentlich Schadsoftware eingeschleust wird.

  • MSApp.execUnsafeLocalFunction

    Deaktiviert den Filter für sichere HTML für die angegebene Funktion. Sie können eine Funktion erstellen, die Inhalt einfügt, der normalerweise blockiert würde, und MSApp.execUnsafeLocalFunction zum Ausführen dieser Funktion verwenden.

    
    
    var someElement = document.getElementById('someElementID');
    MSApp.execUnsafeLocalFunction(
        function() { someElement.innerHTML = '<div onclick="console.log(\"hi\");">hi</div>' }
    );
    
    
    
    
  • WinJS.Utilities.setInnerHTMLUnsafe, WinJS.Utilities.setOuterHTMLUnsafe

    Schreibt die angegebene HTML, ohne den Filter für sichere HTML zu verwenden. (Diese Funktionen sind Bestandteil der WinJS.)

Da Seiten im Webkontext beschränkten Zugriff auf das System haben, unterliegen sie diesen Einschränkungen nicht: Eigenschaften und Funktionen wie innerHTML und pasteHTML führen keine Überprüfung auf mögliche Schadsoftware durch.

DOM-Ereignisse

Grundsätzlich funktionieren DOM-Ereignisse in Windows-Runtime-Apps mit JavaScript wie in einem Webbrowser. Ein paar Unterschiede gibt es aber schon. Eine Liste der Ereignisse, die anders funktionieren, finden Sie in der HTML- und DOM-API-Änderungsliste.

ActiveX-Steuerelemente

Windows-Runtime-Apps mit JavaScript unterstützen keine benutzerdefinierten ActiveX-Steuerelemente. Wenn Sie ein UI-Steuerelement benötigen, verwenden Sie ein HTML- oder WinJS-Steuerelement, oder erstellen Sie ein benutzerdefiniertes WinJS-Steuerelement. Wenn Sie eine benutzerdefinierte Logik ausführen müssen, erstellen Sie stattdessen ein benutzerdefiniertes Windows-Runtime-Objekt.

Codierung

Der gesamte HTML-, JavaScript- und CSS-Code, auf den eine Windows-Runtime-App mit JavaScript zugreift, muss als UTF-8 codiert sein.

Bytecode-Zwischenspeicherung

Wenn eine Windows-Runtime-App mit JavaScript außerhalb der Debuggingumgebung von Microsoft Visual Studio ausgeführt wird, finden verschiedene Leistungsoptimierungen statt. Eine wichtige Optimierung besteht darin, dass alle im App-Paket enthaltenen JavaScript-Dateien (Dateierweiterung JS) in Bytecode konvertiert werden, der vom JavaScript-Modul direkt verwendet werden kann. Ihre App kann den Code in diesen Dateien schneller laden und ausführen als unverarbeitete Dateien, wie beispielsweise eine JavaScript-Datei im Web. Dieser Bytecode und eine Kopie des Quellcodes werden in einer einzelnen Bytecode-Cachedatei mit den Paketdateien gespeichert. Nach Abschluss der Bytecodekonvertierung wirkt sich eine Änderung der ursprünglichen Quelldateien nicht auf die Funktionsweise der App aus. Die App muss erst erneut bereitgestellt werden.

Verwenden von jQuery

Sie können jQuery in Ihrer Windows-Runtime-App mit JavaScript verwenden. Dies gilt allerdings nur für die Versionen 2.0 und höher. Es wird empfohlen, immer die neueste Version zu verwenden.

Verwandte Themen

HTML- und DOM-API-Änderungsliste

 

 

Anzeigen:
© 2015 Microsoft