So wird’s gemacht: Verknüpfen mit externen Webseiten (HTML)

Artikel
12/12/2015

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Hier erfahren Sie, wie Sie Verknüpfungen mit externen Webseiten erstellen und diese in Ihrer App anzeigen lassen können.

Voraussetzungen

Wir gehen davon aus, dass Sie eine einfache App erstellen können. Wenn Sie Hilfe benötigen, lesen Sie Erstellen Ihrer ersten App mit JavaScript.

Anweisungen

Erstellen einer Verknüpfung mit einer externen Webseite

Wenn Sie eine Verknüpfung mit einer externen Webseite erstellen möchten, fügen Sie Ihrem HTML-Code einfach einen Link hinzu. In diesem Beispiel wird eine Verknüpfung mit "www.bing.com" erstellt. Wenn Sie auf die Verknüpfung klicken, wird die Seite im Webbrowser (und nicht in Ihrer App) geöffnet.


<p><a href="https://www.bing.com">Search the web</a></p>

Anzeigen einer externen Webseite in der App

Die App kann eine externe Seite in einem iframe anzeigen. Sie können aber nicht über die Seite der obersten Ebene der App zu einer externen Webseite navigieren.

Hh780594.wedge(de-de,WIN.10).gif So zeigen Sie eine externe Webseite in Ihrer App an

Erstellen Sie einen iframe zum Anzeigen der Webseite. Legen Sie das iframe-Attribut des name-Elements fest.
```
<iframe name="targetFrame">
</iframe>
```
Erstellen Sie einen Link zur externen Website. Setzen Sie das target-Attribut auf den Namen des iframe, den Sie im vorherigen Schritt erstellt haben.
```
<p><a href="https://www.bing.com" target="targetFrame" >Search the web</a></p>

<iframe name="targetFrame">
</iframe>
```
Wenn Sie das App ausführen und auf den Link klicken, wird dieser in der Anwendung geöffnet. Die Seite wird im Webkontext ausgeführt und hat im Vergleich zu den im Paket Ihrer App enthaltenen Seiten eingeschränkten Zugriff auf das System.

Wenn eine externe Webseite in einem iframe angezeigt wird, empfiehlt es sich, für den Fall, dass mit der Seite Probleme auftreten, eine benutzerdefinierte Fehlerseite bereitzustellen. Ein Beispiel dafür finden Sie unter Beispiel zu XHR, Behandeln von Navigationsfehlern und URL-Schemas.

Hinweis Es ist möglich, dass Windows Store-Apps Remoteinhalte aus Leistungsgründen für unbegrenzte Zeit speichern. Das kann dazu führen, dass Ihre App aktuelle Skript- oder CSS-Updates nicht anzeigt. Durch das Deinstallieren und erneute Installieren der App wird der Cache geleert. Andere Lösungen schließen einen Zufallsparameter in die Abfragezeichenfolge ein oder konfigurieren den Webserver so, dass keine Zwischenspeicherung erfolgt. Weitere Informationen hierzu finden Sie unter Zwischenspeicherung in Internet Explorer verhindern.

Informationen zu lokalen und webbasierten Kontextseiten

Seiten, die Sie in die App einfügen, werden 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.

Lokale Kontextseiten und Skripts haben Zugriff auf andere Features als Seiten und Skripts im Webkontext. Sie haben Zugriff auf die Windows-Runtime und führen beispielsweise domänenübergreifende XHR-Anforderungen durch. Sowohl lokale als auch webbasierte Kontextseiten können auf die Windows-Bibliothek für JavaScript zugreifen.

Weitere Informationen zu den für lokale und webbasierte Kontextseiten verfügbaren Features finden Sie im Thema zu Features und Einschränkungen nach Kontext.

Ü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 geben.

Hh780594.wedge(de-de,WIN.10).gif So erteilen Sie einer Webkontextseite zusätzlichen Zugriff

Um einer Seite im Webkontext zusätzlichen Zugriff zu erteilen, können Sie eine Regel für eine Inhalts-URI erstellen. Klicken Sie im Projektmappen-Explorer von Microsoft Visual Studio mit der rechten Maustaste auf die Datei "package.appxmanifest" der App, und wählen Sie Ansicht-Designer aus. Der Manifest-Designer wird angezeigt.
Geben Sie in der Spalte URI den URI der einzufügenden Webseite an.

Es gibt verschiedene Möglichkeiten, eine URI-Übereinstimmung anzugeben:
- Sie können einen exakten Hostnamen angeben.
- Sie können einen Hostnamen angeben, für den ein URI mit einer Unterdomäne dieses Hostnamens einbezogen oder ausgeschlossen wird.
- Sie können einen exakten URI angeben.
- Sie können einen exakten URI angeben, der eine Abfrageeigenschaft enthalten kann.
- Sie können einen Teilpfad angeben und einen Platzhalter für die Angabe einer bestimmten Dateierweiterung für eine Einbeziehungsregel verwenden.
- Sie können relative Pfade für Ausschlussregeln, aber nicht für Einbeziehungsregeln verwenden.
Legen Sie den URI für dieses Beispiel auf https://www.bing.com/* fest.

Hinweis Wenn Sie mehrere Unterdomänen haben, müssen Sie für jede einen Platzhalter verwenden. "https://*.microsoft.com" stimmt beispielsweise mit "https://"any".microsoft.com", nicht jedoch mit "https://"this"."any".microsoft.com" überein.
Mithilfe der Dropdownliste Regel können Sie angeben, ob der URI einbezogen oder ausgeschlossen werden soll. Wählen Sie Einschließen aus.
Klicken Sie auf Neuen URI hinzufügen, um die Regel hinzuzufügen. Der Designer fügt im Hintergrund im Abschnitt ApplicationContentUriRules Ihrer Paketmanifestdatei ein neues Rule-Element hinzu.
```
      <ApplicationContentUriRules>
        <Rule Match="https://www.bing.com/*" Type="include" />
      </ApplicationContentUriRules>
```

Navigieren von webbasierten zu lokalen Kontextseiten

Sie können nur dann von einer Webkontextseite zurück zu einer lokalen Kontextseite navigieren, wenn Sie den MSApp.addPublicLocalApplicationUri über eine lokale Kontextseite aufrufen und ihm den URI der Seite übergeben, zu der Webkontextseiten navigieren können sollen. Wenn Sie beispielsweise möchten, dass eine Webkontextseite zu einer Seite in Ihrer App mit dem Namen "page2.html" navigieren können soll, verwenden Sie den folgenden Code:

MSApp.addPublicLocalApplicationUri("page2.html");

Nun können Webkontextseiten zur Seite "page2.html" navigieren. Sie müssen diese Methode für jede lokale Kontextseite einmal aufrufen, die für Webkontextseiten zugänglich sein soll.

Warnung Wenn eine Seite Abfrageparameter akzeptiert und Sie zulassen, dass von einer beliebigen Stelle im Web zu der Seite navigiert werden kann, kann es vorkommen, dass die externe Webseite schädliche Abfrageparameter übergibt.

Share via