Schritt 4: Externe Links mit einer WebView öffnen

In diesem Schritt erfahren Sie:

  • Hier erfahren Sie, wie Sie externe Webinhalte sicher und in einer Sandbox in Ihrer App anzeigen können.

Ungefähre Dauer: 10 Minuten.
Um eine Vorschau zu sehen, was Sie in diesem Schritt tun werden, springen Sie zum Ende dieser Seite ↓.

Weitere Informationen zum WebView-Tag

Bei einigen Anwendungen müssen externe Webinhalte dem Nutzer direkt präsentiert werden, sie müssen aber innerhalb der App-Erfahrung. Ein Nachrichten-Aggregator kann beispielsweise Nachrichten von externen Quellen mit allen Formatierungen, Bildern und Funktionen der ursprünglichen Website. Für diese und andere verwenden Chrome-Apps ein benutzerdefiniertes HTML-Tag namens webview.

Die Todo App mit WebView

WebView-Tag implementieren

Aktualisieren Sie die To-do-App, um im Text der Aufgaben nach URLs zu suchen und einen Hyperlink zu erstellen. Der Link, wenn angeklickt wurde, öffnet sich ein neues Chrome-App-Fenster (kein Browsertab) mit einer Webansicht, in der die Inhalte dargestellt werden.

Berechtigungen aktualisieren

Fordern Sie 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. Diese Datei ist 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);

Immer wenn ein String, der mit "http://" beginnt, oder „https://“ gefunden wird, wird ein HTML-Anchor-Tag erstellt, um die URL.

Suchen Sie in controller.js nach showAll(). Aktualisieren Sie showAll(), um mithilfe der Methode nach Links zu parsen. Zuvor hinzugefügte Methode _parseForURLs():

/**
 * 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);
  ...
}

Korrigieren Sie in editItem() den Code so, dass innerText des Labels anstelle des innerHTML des Labels:

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 ein neues Chrome-App-Fenster geöffnet über chrome.app.window.create() mit webview.html als Fensterquelle:

  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);

Beachte im chrome.app.window.create()-Callback, wie die WebView-URL über das src-Tag festgelegt wird. enthalten.

Fügen Sie schließlich einen Click-Event-Listener innerhalb des Controller-Konstruktors hinzu, um doShowUrl() aufzurufen, wenn ein Klickt der Nutzer auf einen Link:

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

Sie haben Schritt 4 abgeschlossen. Wenn Sie Ihre App aktualisieren und eine Aufgabe mit einer vollständigen URL hinzufügen, die mit http:// oder https:// enthält, sollten Sie in etwa Folgendes sehen:

Weitere Informationen

Ausführlichere Informationen zu einigen der in diesem Schritt vorgestellten APIs finden Sie hier:

Sind Sie bereit für den nächsten Schritt? Gehen Sie zu Schritt 5: Bilder aus dem Web hinzufügen.