Verwenden von JavaScript im Beispiel zum Reise-Optimierer von Bing Maps
Der HTML- und JavaScript-Teil des Reise-Optimierers von Bing Maps definiert die Benutzeroberfläche. Die Benutzeroberfläche erfasst vom Benutzer eingegebene Standorte und zeigt die kürzeste Route für alle Standorte in einem Bing Maps AJAX-Steuerelement an. In diesem Dokument wird beschrieben, wie der JavaScript-Teil der App organisiert ist und wie der lokale Kontext und der Webkontext miteinander kommunizieren. Außerdem werden einige wichtige Punkte beschrieben, die bei der Migration zu beachten sind.
Der JavaScript-Teil verwendet Standard-CSS, HTML und JavaScript zur Definition der Benutzeroberfläche. Diese Elemente werden im vorliegenden Dokument nicht ausführlich erläutert. Es werden jedoch die Elemente erläutert, die eine JavaScript-Web-App von einer JavaScript-Windows Store-App unterscheiden.
Hinweis
Den Beispielcode zu diesem Dokument finden Sie im Abschnitt über das Codebeispiel für den Reise-Optimierer von Bing Maps.
In diesem Artikel
Lokaler Kontext und Webkontext
Verweisen vom lokalen Kontext auf den Webkontext
Kommunikation zwischen den Kontexten
Migration von ActiveX
Nächste Schritte
Lokaler Kontext und Webkontext
Eine Windows Store-App mit JavaScript enthält mindestens eine HTML-Seite. Diese Seite und alle anderen Seiten, die Sie in der App selbst einschließen, werden im Allgemeinen im lokalen Kontext der App ausgeführt. Wenn Sie iframe verwenden, um zu einer Remoteseite zu navigieren, wird diese Seite nur mit beschränktem Zugriff auf das System im Internetkontext ausgeführt. Weitere Informationen über die verschiedenen Einschränkungen und die Funktionen, die für die Seiten im lokalen und im Webkontext verfügbar sind, finden Sie unter Features and restrictions by context.
Der Reise-Optimierer von Bing Maps teilt die Benutzeroberfläche in zwei Bereiche mit HTML-, CSS- und JavaScript-Dateien auf. Wir sind der Ansicht, dass eine Trennung des Codes zum Verweis auf Windows-Runtime vom Code zum Verweis auf das Internet, die Wartung der App erleichtert. Die Dateien "default.html", "default.css" und "default.js" können Windows-Runtime (einschließlich der benutzerdefinierten Windows-Runtime-Komponente von C++) verweisen, aber nicht auf das Internet zugreifen. "default.html", "default.css" und "default.js" stellen die Hauptseite der App dar. Die Dateien "web.html", "web.css" und "web.js" greifen auf das Internet, aber nicht auf Windows-Runtime zu. Der Inhalt von web.html ist ein Inlineframe des lokalen Kontexts.
Die folgende Abbildung veranschaulicht die Beziehung zwischen dem lokalen Kontext und dem Webkontext. Die Kommunikation dieser Kontexte wird weiter unten in diesem Dokument erläutert.
.png "Lokaler Kontext und Webkontext")
.gif "Sicherheitshinweis") Sicherheitshinweis |
|---|
Durch Verwalten des Webcodes in einem separaten Modul lässt sich die Sicherheit einer App weiter verbessern. Überprüfen Sie nach Möglichkeit die Daten, die Sie im lokalen Kontext vom Webkontext erhalten, damit Sie das Risiko von Sicherheitslücken wie Pufferüberlauf minimieren können. |
[Nach oben]
Verweisen vom lokalen Kontext auf den Webkontext
Das body-Tag des lokalen Kontexts (default.html) definiert ein Inlineframe-Tag (iframe), das den Webkontext (web.html) enthält.
<iframe id="mapFrame" src="ms-appx-web:///html/web.html" style="position: absolute; left: 0px; width: 100%; top: 0px; height: 100%; overflow: hidden"></iframe>
Wenn Sie auf eine Codedatei in der JavaScript-App im Windows Store verweisen, muss folgende Syntax verwendet werden:
src="ms-appx-web://<package-name>/<file-name>"
Sie können den <package-name>-Teil weglassen, wenn die Zieldatei zu dem gleichen Paket gehört wie die aufrufende Datei. Den Paketnamen finden Sie im Anwendungsmanifest. Öffnen Sie dazu in Visual Studio die Datei package.appxmanifest, und wählen Sie die Registerkarte Verpacken. Weitere Informationen über die Navigationsfunktionen, die für in JavaScript geschriebene Windows Store-Apps neu sind, finden Sie unter Quickstart: Using single-page navigation.
[Nach oben]
Kommunikation zwischen den Kontexten
Der lokale Kontext und der Webkontext verwenden für die Kommunikation dokumentübergreifendes Messaging. Bevor die Kontexte kommunizieren können, müssen sie zuerst für Messagingereignisse registriert werden. Beide Dateien, default.html und web.html, geben eine onLoad-Funktion für die onload-Eigenschaft des body-Tags an. Beide onLoad-Funktionen rufen die addEventListener-Methode auf, um auf die Ereignisse des Typs message zu lauschen und diese Meldungen an die receiveMessage-Funktion weiterzuleiten. Im folgenden Beispiel wird die onLoad-Funktion für den lokalen Kontext veranschaulicht.
function onLoad() {
"use strict";
window.addEventListener("message", receiveMessage, false);
}
Wichtig
Der Reise-Optimierer von Bing Maps verwendet dokumentübergreifendes Messaging, da ein Kontext nicht direkt auf das DOM eines anderen Kontexts zugreifen kann.
Nachdem die Kontexte für Messagingereignisse registriert wurden, können sie mithilfe der postMessage-Methode kommunizieren. Diese Methode sendet eine dokumentübergreifende Meldung, die an den Meldungsereignishandler, die receiveMessage-Funktion, des anderen Kontexts weitergeleitet wird. Da dokumentübergreifende Meldungen textbasiert sind, verwenden die App- und Webkontexte die JSON.stringify-Funktion, um Meldungen in JSON-Text zu serialisieren. Wenn ein Kontext eine Meldung empfängt, ruft er die JSON.parse-Funktion auf, um die Felder aus dem JSON-Text zu deserialisieren.
Die Kommunikation der Kontexte lässt sich dadurch veranschaulichen, wie der Webkontext mit dem lokalen Kontext kommuniziert, um die benutzerdefinierte Windows-Runtime-Komponente in C++ zu initialisieren. (Beachten Sie, dass der Webkontext nicht direkt mit der Windows-Runtime-Komponente interagieren kann). Die onLoad-Funktion, die im Webkontext web.js definiert ist, wird während der Initialisierung aufgerufen.
web.js
// Called when the page loads.
function onLoad() {
"use strict";
// Hook to main frame for incoming messages.
window.addEventListener("message", receiveMessage, false);
// Disable input.
disableElement(inputArea, true);
// Load the C++ component.
optimizerLoad();
// Load a default map.
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{
center: new Microsoft.Maps.Location(45.5, -80.5),
mapTypeId: Microsoft.Maps.MapTypeId.auto,
zoom: 4
});
// Reset waypoints.
resetWaypoints();
}
Die onLoad-Funktion ruft die optimizerLoad-Funktion auf. Die optimizerLoad-Funktion kommuniziert mit dem lokalen Kontext, um die Windows-Runtime-Komponente in C++ zu initialisieren.
web.js
function optimizerLoad() {
"use strict";
var message = { "invoke": "load" };
window.parent.postMessage(JSON.stringify(message), "*");
}
Das Laden der Windows-Runtime-Komponente wird aus dem Webkontext statt direkt aus dem lokalen Kontext initiiert, um sicherzustellen, dass beide Kontexte geladen werden, bevor die Windows-Runtime-Komponente erstellt wird.
Die receiveMessage-Funktion im lokalen Kontext analysiert die Meldung und leitet den Aufruf an den entsprechenden Meldungshandler weiter. In diesem Fall lautet das invoke-Feld des deserialisierten JavaScript-Objekts "Last". Daher ruft der lokale Kontext die optimizerLoad-Funktion auf.
default.js
function receiveMessage(message) {
"use strict";
// Verify event origin.
if (message.origin !== "ms-appx-web://microsoft.sdksamples.tripoptimizer.js") {
return;
}
var data = JSON.parse(message.data);
if (data.invoke === "load") {
optimizerLoad();
} else if (data.invoke === "optimizeTrip") {
optimizerOptimizeTrip(
data.locations,
data.travelMode,
data.optimize,
data.bingMapsKey,
data.alpha,
data.beta,
data.rho,
data.iterations,
data.parallel);
} else if (data.invoke === "cancel") {
optimizerCancel();
} else if (data.invoke === "alert") {
// Show message dialog.
new Windows.UI.Popups.MessageDialog(data.message).showAsync().then();
}
}
Die Details der optimizerLoad-Funktion im lokalen Kontext werden unter Zusammenwirken von JavaScript und C++ im Beispiel zum Reise-Optimierer von Bing Maps erläutert.
[Nach oben]
Migration von ActiveX
Informationen darüber, wie Sie von der ActiveX-Version des Reise-Optimierer von Bing Maps zu einer Windows Store-App migrieren, finden Sie unter Migrieren von vorhandenem Code im Beispiel zum Reise-Optimierer von Bing Maps.
[Nach oben]
Nächste Schritte
Lesen Sie Verwenden von C++ im Beispiel zum Reise-Optimierer von Bing Maps, um zu erfahren, wie der Reise-Optimierer von Bing Maps C++ verwendet, um rechenintensive Vorgänge auszuführen und so die Gesamtleistung zu verbessern.
[Nach oben]