Home >Web Front-end >H5 Tutorial >Introduction to 5 HTML5 interfaces you don't know_html5 tutorial skills

Introduction to 5 HTML5 interfaces you don't know_html5 tutorial skills

WBOYOriginal: 2016-05-16 15:48:581961browse

Original address: 5 HTML5 APIs You Didn't Know Existed
Original date: September 27, 2010
Translation date: August 7, 2013
When people see or When the word "HTML5" is said, it is estimated that at least half of the people will think of her as a sexy and charming beauty, but also a unicorn that can make you miserable. No wonder We developers?
We noticed that the basic APIs have been stagnant for such a long time (probably 1999-2009) that even a basic additional function like "placeholder" will take us a long time to process.
Although the current mainstream browsers have implemented many new HTML5 features, many developers have simply not noticed these simpler and more useful APIs.
This series of articles introduces these interface APIs, and also hopes to encourage more developers to explore APIs that are not yet widely known.
Element.classList
This attribute has been released for several years. Through classList, we can manipulate the class attribute of the underlying css through JavaScript.
The code is as follows:

Copy code

The code is as follows:

// Use the classList attribute (Dom element, css class name)
function toggleClassList(element,cName){
// 1. classList API
// Switch the class, remove it if it exists, add it if it doesn’t
if(element.classList.toggle){
element .classList.toggle(cName);
return true;
}
// !!! In fact, if this function toggleClassList is supported,
// then the following code will not be executed. This is just for demonstration, please use it flexibly
// 2. classList API
// Whether the class attribute of element contains hide this CSS class
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. classList API
// Remove hide class
element.classList.remove(cName);
} else {
// 4. classList API
// Add hide class
element.classList.add(cName);
}
return true;
};

ContextMenu API
After testing, chrome28 does not work. . .
The new API, ContextMenu, is an excellent interface: This interface allows you to easily add menu items to the browser's context menu (right-click menu), instead of overriding the browser's default right-click menu.
It should be noted that you'd better use js script to dynamically create the menu contextmenu, so as to avoid redundant HTML code when the page disables JS script.
The code is as follows:

Copy the code

The code is as follows:

Element.dataset
Dataset (dataset) API allows developers to set (set) and get (get) attribute values starting with the data- prefix on DOM elements.
The code is as follows:

Copy the code

The code is as follows:

Copy code

The code is as follows:

function testDataset(){
//
var intro = document.getElementById("intro");
// Note that this is not the id attribute, but the value of data-id
var id = intro.dataset.id;
// data-website
var website = intro.dataset.website;
// data-blog-url, camel case..
var blogUrl = intro.dataset.blogUrl;
// data-my-name
var myName = intro.dataset.myName;
//
var msg = "qq:" id
",website:" website
",blogUrl:" blogUrl
",myName:" myName
;
//
warn(msg);
};

Nothing to say, just like classList, simple but practical. (Think about it, has it changed some interactions and decoupling of background and front-end JS?)

window.postMessage API
IE8 has supported postMessage API for several years, this API allows window and iframe elements to communicate with each other. Cross-domain support. The code is as follows:

Copy code The code is as follows:

// From window or frame on domain 1, send a message to the iframe which hosts another domain
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("Hello from the first window!");
// From inside the iframe on different host, receive message
window.addEventListener("message", function(event) {
// Make sure we trust the sending domain
if(event.origin = = "http://davidwalsh.name") {
// Log out the message
console.log(event.data);
// Send a message back
event.source.postMessage ("Hello back!");
}
]);
// message only allows string type data, but you can use JSON.stringify and JSON.parse to pass more meaningful messages.

autofocus Attribute The autofocus attribute ensures that a given BUTTON, INPUT or TEXTAREA element automatically gets focus when the page loads.

Copy codeThe code is as follows:

autofocus Attributes are mainly used in simple input pages. For details, please refer to: autofocus attribute
Each browser manufacturer has different support for these APIs, so it is best to check the compatibility before using it and spend some time reading the above. Listed APIs, you will learn more about them and master them. The test code for the
part is as follows:

Copy the codeThe code is as follows:

5 HTML5 API interface demonstrations you don’t know

<script> // Display warning message function warn(msg){ warn = warn || "An unknown warning!" ; if(window.console){ console.warn(msg); } else { alert(msg); } }; // Use classList attribute (Dom element, css class name) function toggleClassList(element, cName){ // 1. classList API // Switch classes, remove them if they exist, add them if they don’t exist if (element.classList.toggle){ element.classList.toggle(cName); return true; } // !!! In fact, this function toggleClassList if supported, // Then the following code will not be executed. It is only for demonstration. Please apply it flexibly // 2. classList API // Whether the class attribute of element contains hide this CSS class var hasHide = element.classList.contains(cName); // if(hasHide){ // 3. classList API // Remove hide class element.classList.remove( cName); } else { // 4. classList API // Add hide class element.classList.add(cName); } return true; }; // Use className attribute (Dom element, css class name) function toggleClassName(element, cName){ var className = element.className || ""; // Remove Blank spaces at the beginning and end cName = cName.replace(/^s*|s*$/g,""); // If there are blank characters in the middle of cName, it will fail. If you want to handle it well, you can split it For arrays, process them individually var blankReg = /s /; if(blankReg.test(cName)){ warn("'" cName "'contains blank characters in the middle"); return false; } // Regularly, b represents the boundary of visible continuous characters, which can be understood like this: // "hide2 hide hide myname" Then, // There is a virtual one before and after hide2 There is also b before and after hide, // but not between hi and de. // g represents a single-line global //var rep = /bhideb/g; var rep = new RegExp("\b" cName "\b", "g"); if (rep.test(className)){ className = className.replace(rep,""); } else { className = " " cName; } // Replace new className. element.className = className; return true; }; // Function, toggle (element id, className) function toggleClass(elementId, cName){ // Get a DOM element var element = document.getElementById(elementId); // If the element does not exist if(!element){ warn("The element with id " elementId " does not exist "); return false; } if(!element.classList){ warn("The element with id " elementId " does not support the classList attribute and will use other means to achieve it") ; return toggleClassName(element,cName); } else { return toggleClassList(element,cName); } }; function testDataset(){ / / var intro = document.getElementById("intro"); // Note that this is not the id attribute, but the value of data-id var id = intro.dataset.id; / /data-website var website = intro.dataset.website; // data-blog-url, camel case.. var blogUrl = intro.dataset.blogUrl; // data -my-name var myName = intro.dataset.myName; // var msg = "qq:" id ",website:" website ",blogUrl:" blogUrl ",myName:" myName ; // warn(msg); }; // Execute after dom is loaded window.addEventListener("DOMContentLoaded" , function() { var open = document.getElementById("open"); var close = document.getElementById("close"); open.addEventListener("click",function(){ // toggleClass("diary2","hide"); toggleClass("loading","hide"); }); close.addEventListener("click", function(){ // toggleClass("diary2","hide"); toggleClass("loading","hide"); }); // testDataset(); }, false); </script>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Complete code for drawing Bezier curve using HTML5 canvas_html5 tutorial skillsNext article：Complete code for drawing Bezier curve using HTML5 canvas_html5 tutorial skills

See more

Introduction to 5 HTML5 interfaces you don't know_html5 tutorial skills

Click this area to view the menu

Click this area to view the menu

Related articles