Beispielcode zum Erstellen von Offline-Webanwendungen in HTML5
Mit der Funktion
Offline-AnwendungenCache können wir alle von der Webanwendung benötigten Ressourcen angeben,
Auf diese Weise kann der Browser sie alle herunterladen, wenn er das HTML-Dokument lädt.
1) Browser-Cache definieren:
Offline-Caching aktivieren – eine Manifestdatei erstellen und im manest-Attribut des html-Elements darauf verweisen
Geben Sie Ressourcen an, die in Offline-Anwendungen zwischengespeichert werden sollen – listen Sie Ressourcen oben in der Manifestdatei oder im CACHE-Bereich auf; 🎜>Geben Sie den Sicherungsinhalt an, der angezeigt werden soll, wenn die Ressource nicht verfügbar ist – listen Sie den Inhalt im Bereich FALLBACK der Manifestdatei auf; 🎜> zeigt auf die Ressource, die immer vom Server angefordert wird – der Inhalt wird im BETWORK-Bereich der Manifestdatei aufgeführt
Beispiel: Erstellen Sie zunächst die Manifestdatei von Fruit.appcache
Erstellen Sie die 404.html-Datei erneut, wenn sich die HTML-Datei, auf die der Link verweist, nicht im Offline-Cache befindet.
CACHE MANIFEST
example.html
banana100.png
FALLBACK:
* 404.html
NETWORK:
cherries100.png
CACHE:
apple100.png
Erstellen Sie abschließend die html-Datei, die für das Offline-Caching aktiviert werden muss
2) Browser-
-Status<!DOCTYPE HTML>
<html manifest="fruit.appcache">
<head>
<title>Offline</title>
</head>
<body>
<h1>您要的页面找不到了！</h1>
或许您可以帮我们找找孩子！
</body>
</html>window.navigator.online - wenn Es wird festgestellt, dass der Browser offline ist. Geben Sie „false“ zurück. Wenn der Browser möglicherweise online ist, wird „true“ zurückgegeben.
<!DOCTYPE HTML>
<html manifest="fruit.appcache">
<head>
<title>Example</title>
<style>
img {border: medium double black; padding: 5px; margin: 5px;}
</style>
</head>
<body>
<img id="imgtarget" src="banana100.png"/>
<p>
<button id="banana">Banana</button>
<button id="apple">Apple</button>
<button id="cherries">Cherries</button>
</p>
<a href="otherpage.html">Link to another page</a>
<script>
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = handleButtonPress;
}
function handleButtonPress(e) {
document.getElementById("imgtarget").src = e.target.id + "100.png";
}
</script>
</body>
</html>Sie können den Offline-Cache direkt verwenden, indem Sie die Eigenschaft window.applicationCache aufrufen, die ein ApplicationCache-
-Objektzurückgibt ApplicationCache-Objekt Mitglieder:
aktuellDatum()——
Aktualisierungen der -Cache, um sicherzustellen, dass alle Elemente in der Liste die neueste Version heruntergeladen haben;
apCache() – Swap der aktuelle Cache mit einem neueren Cache Status – gibt Cache-Status zurück
3.1) ApplicationCache-ObjektStatusattributwert:
0 – UNCACHED – Dieses Dokument ist nicht zwischengespeichert oder speichert Daten wurde noch nicht heruntergeladen 1 – IDLE – der Cache wurde heruntergeladen keine Operationen durchführen
2——CHECKING——浏览器正在检查清单或清单所指定项目的更新；
3——DOWNLOADING——浏览器正在下载清单或内容的更新；
4——UPDATEREADY——有更新后的缓存数据可用；
5——OBSOLETE——缓存数据已经废弃，不应该再使用了。这是请求清单文件时返回HTTP状态码4xx所造成的
（通常表明清单文件已被移走/删除）；
3.2）ApplicationCache对象定义的事件，在缓存状态改变时触发：
checking——浏览器正在获取初始清单或者检查清单更新；
noupdate——没有更新可用，当前的清单是最新版；
downloading——浏览器正在下载清单里指定的内容；
progress——在下载阶段中触发；
cached——清单里指定的所有内容都已被下载和缓存了；
updateready——新资源已下载并且可以使用了；
obsolete——缓存已废弃；
CACHE MANIFEST CACHE: example.html banana100.png cherries100.png apple100.png FALLBACK: * offline2.html
<!DOCTYPE HTML>
<html manifest="fruit.appcache">
<head>
<title>Example</title>
<style>
img {border: medium double black; padding: 5px; margin: 5px;}
p {margin-top: 10px; margin-bottom: 10px}
table {margin: 10px; border-collapse: collapse;}
th, td {padding: 2px;}
body > * {float: left;}
</style>
</head>
<body>
<p>
<img id="imgtarget" src="banana100.png"/>
<p>
<button id="banana">Banana</button>
<button id="apple">Apple</button>
<button id="cherries">Cherries</button>
</p>
<p>
<button id="update">Update</button>
<button id="swap">Swap Cache</button>
</p>
The status is: <span id="status"></span>
</p>
<table id="eventtable" border="1">
<tr><th>Event Type</th></tr>
</table>
<script>
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = handleButtonPress;
}
window.applicationCache.onchecking = handleEvent;
window.applicationCache.onnoupdate = handleEvent;
window.applicationCache.ondownloading = handleEvent;
window.applicationCache.onupdateready = handleEvent;
window.applicationCache.oncached = handleEvent;
window.applicationCache.onobselete = handleEvent;
function handleEvent(e) {
document.getElementById("eventtable").innerHTML +=
"<tr><td>" + e.type + "</td></td>";
checkStatus();
}
function handleButtonPress(e) {
switch (e.target.id) {
case 'swap':
window.applicationCache.swapCache();
break;
case 'update':
window.applicationCache.update();
checkStatus();
break;
default:
document.getElementById("imgtarget").src = e.target.id
+ "100.png";
}
}
function checkStatus() {
var statusNames = ["UNCACHED", "IDLE", "CHECKING", "DOWNLOADING",
"UPDATEREADY", "OBSOLETE"];
var status = window.applicationCache.status;
document.getElementById("status").innerHTML = statusNames[status];
}
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonBeispielcode zum Erstellen von Offline-Webanwendungen in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1386
52
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
