5 einfache und praktische APIs in HTML5_HTML5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

5 einfache und praktische APIs in HTML5_HTML5-Tutorial-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:47:59

Original

1743 Leute haben es durchsucht

Das kann man von uns nicht als eitel bezeichnen. Seit vielen Jahren hat sich die grundlegende HTML-API überhaupt nicht weiterentwickelt, sodass wir neuartig aussehen, wenn eine kleine neue Funktion wie ein Platzhalter erscheint. Obwohl viele HTML5-Funktionen in modernen Browsern implementiert sind, kennen die meisten Programmierer immer noch nicht einige kleine, sehr nützliche APIs oder haben noch nie davon gehört. In diesem Artikel werde ich einige solcher APIs vorstellen und jeden dazu einladen, weitere unbekannte HTML5-APIs zu entdecken!

Element.classList

Die classList-API bietet die grundlegende Funktionalität zur Steuerung von CSS, die wir seit vielen Jahren mithilfe von JavaScript-Toolbibliotheken implementieren:

Code kopieren

Der Code lautet wie folgt:

// Eine CSS-Klasse hinzufügen
myElement.classList.add("newClass");
//Eine CSS-Klasse löschen
myElement.classList.remove("existingClass");
// Überprüfen Sie, ob eine CSS-Klasse vorhanden ist
myElement.classList.contains("oneClass");
// Das Vorhandensein einer CSS-Klasse umkehren
myElement.classList.toggle("anotherClass");

Der Hauptwert dieser neuen API ist: einfach und praktisch.

ContextMenu API

Diese neue ContextMenu-API ist sehr nützlich: Sie ersetzt nicht das ursprüngliche Rechtsklick-Menü, sondern fügt Ihr benutzerdefiniertes Rechtsklick-Menü zum Rechtsklick-Menü des Browsers hinzu:

Code kopieren

Der Code lautet wie folgt:

Es ist zu beachten, dass es am besten ist, JavaScript zum dynamischen Erstellen dieser Menücodes zu verwenden, da Menüereignisse letztendlich JavaScript zum Ausführen von Aufgaben aufrufen. Wenn der Benutzer JavaScript deaktiviert, wird das Rechtsklickmenü nicht generiert und er wird das Menü nicht gleichzeitig angezeigt.

Element.dataset

Mithilfe der Datensatz-API können Programmierer ganz einfach Daten-*benutzerdefinierte Attribute abrufen oder festlegen:

Code kopieren

Der Code lautet wie folgt:

/* Nehmen Sie den folgenden Code als Beispiel

*/
// Element abrufen
var element = document.getElementById("myDiv");
// ID abrufen
var id = element.dataset.id;
// Wert „data -my-custom-key“ lesen
var customKey = element.dataset.myCustomKey;
// In anderen Wert ändern
element.dataset.myCustomKey = „Some other value“;
// Das Ergebnis ist:
//

< /div>

Keine Notwendigkeit mehr zu sagen, genau wie classList, einfach und praktisch

window.postMessage API

Sogar IE8 unterstützt seit vielen Jahren die PostMessage-API. Die Funktion der PostMessage-API besteht darin, Ihnen die Übertragung von Informationsdaten zwischen zwei Browserfenstern oder Iframes zu ermöglichen:

Code kopieren

Der Code lautet wie folgt:

// Senden Sie vom Fenster oder Iframe in Domäne A eine Nachricht an das Fenster oder den Iframe in Domäne B
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("Grüße aus dem ersten Fenster!");

//Empfangen Sie Nachrichten in einem Fenster oder Iframe auf einer zweiten anderen Domain
window.addEventListener("message", function(event) {
// Überprüfen Sie die Gültigkeit der Domain
if( event.origin == "http://www.jb51.net") {
// Protokollinformationen ausgeben
console.log(event.data);
// Feedback-Nachricht
event. source.postMessage("Wie geht es dir auch!");
}
]);

Der Nachrichtentext kann nur ein String sein, aber Sie können JSON.stringify und JSON.parse verwenden, um die Nachricht in einen aussagekräftigeren Datentext umzuwandeln!

Autofokus-Attribut

Das

Autofokus-Attribut ermöglicht, dass das BUTTON-, INPUT- oder TEXTAREA-Element automatisch zum Seitenfokus wird, wenn die Seite geladen wird:

Code kopieren

Der Code lautet wie folgt:

An Orten mit festen Mustern wie Google-Suchseiten ist das Autofokus-Attribut die idealste Funktion.

Die Browserunterstützung für jede API unterscheidet sich geringfügig. Überprüfen Sie daher die Unterstützung für diese Funktionen, bevor Sie sie verwenden. Nehmen Sie sich etwas Zeit, um die detaillierte Beschreibung jeder API zu lesen. Ich glaube, Sie werden mehr finden.