Krok 4. Otwieraj linki zewnętrzne za pomocą komponentu WebView

W tym kroku poznasz:

  • Jak wyświetlać zewnętrzne treści internetowe w aplikacji w bezpieczny sposób w trybie piaskownicy.

Szacowany czas potrzebny na ukończenie tego kroku: 10 minut.
Aby zobaczyć podgląd czynności, które wykonasz w tym kroku, przeskocz na dół strony ↓.

Więcej informacji o tagu WebView

Niektóre aplikacje muszą prezentować zewnętrzne treści internetowe bezpośrednio użytkownikowi, ale utrzymują je w aplikacji. Na przykład agregator wiadomości może chcieć umieścić wiadomości z zewnętrznych źródeł z formatowaniem, grafiką i działaniem podobnych do tych w oryginalnej witrynie. Dla tych i innych aplikacje Chrome mają niestandardowy tag HTML o nazwie webview.

aplikacji Todo, używając komponentu WebView

Implementowanie tagu WebView

Zaktualizuj aplikację Todo, aby wyszukiwać adresy URL w tekście elementu listy zadań i utworzyć hiperlink. Gdy link po kliknięciu otwiera nowe okno aplikacji Chrome (nie kartę przeglądarki) z komponentem WebView przedstawiającym treść.

Aktualizuj uprawnienia

W pliku manifest.json poproś o uprawnienie webview:

"permissions": [
  "storage",
  "alarms",
  "notifications",
  "webview"
],

Tworzenie strony komponentu WebView

Utwórz nowy plik w katalogu głównym folderu projektu i nadaj mu nazwę webview.html. Ten plik jest podstawowa strona internetowa z jednym tagiem <webview>:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <webview style="width: 100%; height: 100%;"></webview>
</body>
</html>

Analizuj pod kątem adresów URL w elementach zadań do wykonania

Na końcu pliku controller.js dodaj nową metodę o nazwie _parseForURLs():

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

Za każdym razem, gdy ciąg zaczynający się od „http://” lub „https://” zostanie utworzony tag kotwicy HTML, który umożliwi wokół adresu URL.

Znajdź showAll() w pliku controller.js. Zaktualizuj showAll(), aby analizować linki za pomocą Dodano wcześniej metodę _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));
};

Zrób to samo dla elementów showActive() i 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));
};

Na koniec dodaj _parseForURLs() do editItem():

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

Będąc w aplikacji editItem(), popraw kod tak, aby używał etykiety innerText etykiety zamiast innerHTML etykiety:

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;
  ...
}

Otwórz nowe okno z komponentem WebView

Do pliku controller.js dodaj metodę _doShowUrl(). Ta metoda otwiera nowe okno aplikacji Chrome przez chrome.app.window.create() z webview.html jako źródłem okna:

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

Zwróć uwagę, że w wywołaniu zwrotnym chrome.app.window.create() zwróć uwagę, jak adres URL komponentu WebView jest ustawiany w tagu src. .

Na koniec dodaj odbiornik zdarzeń kliknięcia w konstruktorze Controller, aby wywoływać funkcję doShowUrl(), gdy użytkownik klika 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));
  ...
}

Uruchom gotową aplikację Todo

Krok 4 ukończony. Jeśli załadujesz ponownie aplikację i dodasz zadanie do wykonania z pełnym adresem URL zaczynającym się od http:// lub https://, strona powinna wyglądać tak:

Więcej informacji

Szczegółowe informacje o niektórych interfejsach API wprowadzonych w tym kroku znajdziesz tutaj:

Chcesz przejść dalej? Przejdź do Kroku 5 – Dodaj obrazy z internetu »