In diesem Schritt erfahren Sie Folgendes:
- Externe Webinhalte in Ihrer App auf sichere und sandboxfähige Weise anzeigen
Geschätzte Dauer für diesen Schritt: 10 Minuten
Eine Vorschau dessen, was Sie in diesem Schritt tun, finden Sie unten auf dieser Seite ↓.
Weitere Informationen zum WebView-Tag
Bei einigen Anwendungen müssen externe Webinhalte direkt für den Nutzer angezeigt werden, aber innerhalb der Anwendung bleiben. Ein Nachrichten-Aggregator kann beispielsweise die Nachrichten von externen Websites mit allen Formatierungen, Bildern und Funktionen der ursprünglichen Website einbetten. Für diese und andere Anwendungsfälle gibt es in Chrome-Apps ein benutzerdefiniertes HTML-Tag namens webview.
WebView-Tag implementieren
Aktualisieren Sie die To-do-App, damit im Text des To-do-Eintrags nach URLs gesucht und ein Hyperlink erstellt wird. Wenn Sie auf den Link klicken, wird ein neues Chrome App-Fenster (kein Browsertab) mit einer WebView geöffnet, in der die Inhalte angezeigt werden.
Berechtigungen aktualisieren
Fordere in manifest.json die Berechtigung webview an:
"permissions": [
"storage",
"alarms",
"notifications",
"webview"
],
WebView-Einbettungsseite erstellen
Erstellen Sie im Stammverzeichnis Ihres Projektordners eine neue Datei und nennen Sie sie webview.html. Bei dieser Datei handelt es sich um eine einfache Webseite mit einem <webview>-Tag:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<webview style="width: 100%; height: 100%;"></webview>
</body>
</html>
Nach URLs in Aufgaben parsen
Fügen Sie am Ende von controller.js eine neue Methode namens _parseForURLs() hinzu:
Controller.prototype._getCurrentPage = function () {
return document.location.hash.split('/')[1];
};
Controller.prototype._parseForURLs = function (text) {
var re = /(https?:\/\/[^\s"<>,]+)/g;
return text.replace(re, '<a href="$1" data-src="$1">$1</a>');
};
// Export to window
window.app.Controller = Controller;
})(window);
Wenn ein String mit „http://“ oder „https://“ gefunden wird, wird ein HTML-Anchor-Tag erstellt, das die URL umschließt.
Hyperlinks in der To-do-Liste rendern
Suchen Sie in controller.js nach showAll(). Aktualisieren Sie showAll(), damit nach Links geparst wird, indem Sie die zuvor hinzugefügte Methode _parseForURLs() verwenden:
/**
* An event to fire on load. Will get all items and display them in the
* todo-list
*/
Controller.prototype.showAll = function () {
this.model.read(function (data) {
this.$todoList.innerHTML = this.view.show(data);
this.$todoList.innerHTML = this._parseForURLs(this.view.show(data));
}.bind(this));
};
Wiederhole den Vorgang für showActive() und showCompleted():
/**
* Renders all active tasks
*/
Controller.prototype.showActive = function () {
this.model.read({ completed: 0 }, function (data) {
this.$todoList.innerHTML = this.view.show(data);
this.$todoList.innerHTML = this._parseForURLs(this.view.show(data));
}.bind(this));
};
/**
* Renders all completed tasks
*/
Controller.prototype.showCompleted = function () {
this.model.read({ completed: 1 }, function (data) {
this.$todoList.innerHTML = this.view.show(data);
this.$todoList.innerHTML = this._parseForURLs(this.view.show(data));
}.bind(this));
};
Fügen Sie abschließend _parseForURLs() zu editItem() hinzu:
Controller.prototype.editItem = function (id, label) {
...
var onSaveHandler = function () {
...
// Instead of re-rendering the whole view just update
// this piece of it
label.innerHTML = value;
label.innerHTML = this._parseForURLs(value);
...
}.bind(this);
...
}
Ändern Sie in editItem() den Code so, dass die innerText des Labels anstelle der innerHTML des Labels verwendet wird:
Controller.prototype.editItem = function (id, label) {
...
// Get the innerHTML of the label instead of requesting the data from the
// Get the innerText of the label instead of requesting the data from the
// ORM. If this were a real DB this would save a lot of time and would avoid
// a spinner gif.
input.value = label.innerHTML;
input.value = label.innerText;
...
}
Neues Fenster mit Webview öffnen
Fügen Sie controller.js eine _doShowUrl()-Methode hinzu. Mit dieser Methode wird über chrome.app.window.create() mit webview.html als Fensterquelle ein neues Chrome-App-Fenster geöffnet:
Controller.prototype._parseForURLs = function (text) {
var re = /(https?:\/\/[^\s"<>,]+)/g;
return text.replace(re, '<a href="$1" data-src="$1">$1</a>');
};
Controller.prototype._doShowUrl = function(e) {
// only applies to elements with data-src attributes
if (!e.target.hasAttribute('data-src')) {
return;
}
e.preventDefault();
var url = e.target.getAttribute('data-src');
chrome.app.window.create(
'webview.html',
{hidden: true}, // only show window when webview is configured
function(appWin) {
appWin.contentWindow.addEventListener('DOMContentLoaded',
function(e) {
// when window is loaded, set webview source
var webview = appWin.contentWindow.
document.querySelector('webview');
webview.src = url;
// now we can show it:
appWin.show();
}
);
});
};
// Export to window
window.app.Controller = Controller;
})(window);
Beachten Sie im chrome.app.window.create()-Callback, dass die URL der Webansicht über das src-Tag-Attribut festgelegt wird.
Fügen Sie abschließend im Konstruktor von Controller einen Klick-Ereignis-Listener hinzu, um doShowUrl() aufzurufen, wenn ein Nutzer auf einen Link klickt:
function Controller(model, view) {
...
this.router = new Router();
this.router.init();
this.$todoList.addEventListener('click', this._doShowUrl);
window.addEventListener('load', function () {
this._updateFilterState();
}.bind(this));
...
}
Fertige To-do-App starten
Schritt 4 ist abgeschlossen. Wenn Sie Ihre App neu laden und ein To-do-Element mit einer vollständigen URL hinzufügen, die mit http:// oder https:// beginnt, sollte ungefähr Folgendes angezeigt werden:
Weitere Informationen
Ausführlichere Informationen zu einigen der in diesem Schritt vorgestellten APIs finden Sie hier:
Sind Sie bereit, mit dem nächsten Schritt fortzufahren? Weiter zu Schritt 5: Bilder aus dem Web hinzufügen »