logo

5 HTML5 API, o kterých jste nevěděli, že existují

Když řeknete nebo čtete „HTML5“, napůl očekáváte, že do místnosti vejdou exotické tanečnice a jednorožci za tónu „Jsem sexy a vím to“. Můžete nás ale vinit? Sledovali jsme stagnaci základních API tak dlouho, že nám přidání základní funkce, jako je zástupný symbol, „zabralo minutu“. Navzdory mnoha funkcím HTML5, které jsou implementovány v moderních prohlížečích, mnoho vývojářů neví o některých menších, užitečných API, které máme k dispozici. Tento příspěvek odhaluje tato rozhraní API a byl napsán s cílem povzbudit vás k prozkoumání méně známých rozhraní API HTML5!

Element.classList

ClassList API poskytuje základní ovládací prvky CSS, které nám naše JavaScriptové knihovny poskytují již léta:

// Add a class to an element
myElement.classList.add("newClass");

// Remove a class to an element
myElement.classList.remove("existingClass");

// Check for existence
myElement.classList.contains("oneClass");

// Toggle a class
myElement.classList.toggle("anotherClass");

Ztělesnění skvělého doplňku API: jednoduché a inteligentní. Přečtěte si tento příspěvek a dozvíte se o několika dalších vlastnostech classList.

ContextMenu API

Nové ContextMenu API je vynikající: místo přepsání kontextové nabídky prohlížeče vám nové ContextMenu API umožňuje jednoduše přidávat položky do kontextové nabídky prohlížeče:

<section contextmenu="mymenu">
  <!-- 
    For the purpose of cleanliness, 
    I'll put my menu inside the element that will use it 
  -->

  <!-- add the menu -->
  <menu type="context" id="mymenu">
	  <menuitem label="Refresh Post" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem>
	  <menu label="Share on..." icon="/images/share_icon.gif">
	    <menuitem label="Twitter" icon="/images/twitter_icon.gif" onclick="goTo('//twitter.com/intent/tweet?text=' + document.title + ':  ' + window.location.href);"></menuitem>
	    <menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
	  </menu>
	</menu>
</section>

Všimněte si, že je nejlepší vytvořit značku nabídky pomocí JavaScriptu, protože pro fungování akcí položek je vyžadován JS a pokud je JS vypnutý, HTML byste na stránce nechtěli.

Element.dataset

Dataset API umožňuje vývojářům získat a nastavit data- hodnoty atributu:

/*  Assuming element:

	<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>

*/

// Get the element
var element = document.getElementById("myDiv");

// Get the id
var id = element.dataset.id;

// Retrieves "data-my-custom-key"
var customKey = element.dataset.myCustomKey;

// Sets the value to something else
element.dataset.myCustomKey = "Some other value";

	// Element becomes:
	//    <div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="Some other value"></div>

Není moc co říct; stejně jako classList, jednoduché a efektivní.

window.postMessage API

PostMessage API, které je dokonce léta podporováno v IE8, umožňuje posílání zpráv mezi okny a prvky IFRAME:

// 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 == "https://davidwalsh.name") {
		// Log out the message
		console.log(event.data);

		// Send a message back
		event.source.postMessage("Hello back!");
	}
]);

Zprávy mohou být pouze řetězce, ale vždy můžete použít JSON.stringify a JSON.parse pro smysluplnější data!

atribut automatického ostření

autofocus atribut zajišťuje, že daný BUTTON , INPUT nebo TEXTAREA prvek je zaměřen na to, kdy je stránka připravena:

<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>

Je pravda, že atribut autofocus je pro zrakově postižené dezorientující, ale na stránkách jednoduchého vyhledávání je to perfektní doplněk.

Podpora prohlížeče pro každé rozhraní API se liší, proto před použitím každého rozhraní API použijte detekci funkcí. Udělejte si chvilku na přečtení podrobných příspěvků o každé funkci výše – dozvíte se toho spoustu a doufejme, že budete mít příležitost pohrát si s každým API!