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 odizolowanym środowisku

Szacowany czas wykonania tego kroku: 10 minut
Aby wyświetlić podgląd tego, co musisz zrobić na tym etapie, przewiń na dół strony ↓.

Więcej informacji o tagu webview

Niektóre aplikacje muszą wyświetlać użytkownikowi zewnętrzne treści internetowe, ale muszą robić to w ramach interfejsu aplikacji. Na przykład agregator wiadomości może chcieć osadzić wiadomości z zewnętrznych witryn wraz z formatowaniem, obrazami i zachowaniem oryginalnej witryny. W tych i innych przypadkach aplikacje Chrome mają niestandardowy tag HTML o nazwie webview.

aplikacji Todo, używając komponentu WebView

Implementacja tagu WebView

Zaktualizuj aplikację Todo, aby wyszukać adresy URL w tekście zadania i utworzyć hiperlink. Po kliknięciu link otwiera nowe okno aplikacji Chrome (a nie kartę przeglądarki) z komponentem WebView wyświetlającym treść.

Aktualizuj uprawnienia

W pliku manifest.json poproś o uprawnienie webview:

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

Tworzenie strony z widżetem Webview

W katalogu głównym folderu projektu utwórz nowy plik o nazwie webview.html. Ten plik to prosta 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>

Parsowanie adresów URL w elementach listy zadań

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

Gdy zostanie znaleziony ciąg znaków zaczynający się od „http://” lub „https://”, tworzony jest tag kotwicy HTML, który otacza adres URL.

Znajdź element showAll() w pliku controller.js. Zaktualizuj showAll(), aby analizować linki za pomocą dodanej wcześniej metody _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 w przypadku atrybutów showActive()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 nadal w elemencie editItem(), popraw kod tak, aby używał elementu 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 widżetem przeglądarki

Dodaj metodę _doShowUrl() do pliku controller.js. Ta metoda otwiera nowe okno aplikacji Chrome za pomocą polecenia 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);

W wywołaniu zwrotnym chrome.app.window.create() zwróć uwagę, jak adres URL przeglądarki internetowej jest ustawiany za pomocą atrybutu tagu src.

Na koniec dodaj w konstruktrze Controller odbiornik zdarzenia kliknięcia, aby wywołać funkcję doShowUrl(), gdy użytkownik kliknie 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));
 
...
}

Uruchomienie gotowej aplikacji Todo

Krok 4 ukończony. Jeśli ponownie wczytasz aplikację i dodasz do niej element listy zadań z pełnym adresem URL zaczynającym się od http:// lub https://, powinieneś zobaczyć coś takiego:

Więcej informacji

Więcej informacji o niektórych interfejsach API wymienionych na tym etapie znajdziesz w tych artykułach:

Czy chcesz przejść do następnego kroku? Przejdź do Kroku 5 – Dodaj obrazy z internetu »