In deze stap leer je:
- Hoe u externe webinhoud in uw app op een veilige en sandbox-manier kunt weergeven.
Geschatte tijd om deze stap te voltooien: 10 minuten.
Om een voorbeeld te zien van wat u in deze stap gaat voltooien, springt u naar de onderkant van deze pagina ↓ .
Meer informatie over de webview-tag
Sommige applicaties moeten externe webinhoud rechtstreeks aan de gebruiker presenteren, maar deze binnen de applicatie-ervaring houden. Een nieuwsaggregator wil bijvoorbeeld het nieuws van externe sites insluiten met alle opmaak, afbeeldingen en gedrag van de oorspronkelijke site. Voor deze en andere toepassingen hebben Chrome-apps een aangepaste HTML-tag met de naam webview .
Implementeer de webview-tag
Update de Todo-app om te zoeken naar URL's in de tekst van het taakitem en maak een hyperlink. Wanneer op de link wordt geklikt, wordt een nieuw Chrome App-venster geopend (geen browsertabblad) met een webweergave waarin de inhoud wordt gepresenteerd.
Machtigingen bijwerken
Vraag in manifest.json de webview machtiging aan:
"permissions": [
"storage",
"alarms",
"notifications",
"webview"
],
Maak een webview-insluitpagina
Maak een nieuw bestand in de hoofdmap van uw projectmap en noem het webview.html . Dit bestand is een basiswebpagina met één <webview> -tag:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<webview style="width: 100%; height: 100%;"></webview>
</body>
</html>
Parseer voor URL's in takenitems
Voeg aan het einde van controller.js een nieuwe methode toe met de naam _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);
Telkens wanneer een tekenreeks wordt gevonden die begint met 'http://' of 'https://', wordt er een HTML-ankertag gemaakt die rond de URL loopt.
Render hyperlinks in de takenlijst
Zoek showAll() in controller.js . Update showAll() om links te parseren met behulp van de eerder toegevoegde _parseForURLs() -methode:
/**
* 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));
};
Doe hetzelfde voor showActive() en 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));
};
En tot slot, voeg _parseForURLs() toe aan 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);
...
}
Nog steeds in editItem() , repareer de code zodat deze de innerText van het label gebruikt in plaats van de innerHTML van het label:
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;
...
}
Open een nieuw venster met webview
Voeg een _doShowUrl() -methode toe aan controller.js . Deze methode opent een nieuw Chrome App-venster via chrome.app.window.create() met webview.html als vensterbron:
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);
Merk in de chrome.app.window.create() callback op hoe de URL van de webview wordt ingesteld via het src tag attribuut .
Voeg ten slotte een klikgebeurtenislistener toe in de Controller constructor om doShowUrl() aan te roepen wanneer een gebruiker op een link klikt:
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));
...
}
Start uw voltooide Todo-app
Je bent klaar Stap 4! Als u uw app opnieuw laadt en een actiepunt toevoegt met een volledige URL die begint met http:// of https://, zou u zoiets als dit moeten zien:
Voor meer informatie
Voor meer gedetailleerde informatie over enkele van de API's die in deze stap zijn geïntroduceerd, raadpleegt u:
Klaar om door te gaan naar de volgende stap? Ga naar Stap 5 - Afbeeldingen van internet toevoegen »