JavaScript is the most used scripting language on the web by a wide margin. Still many new JavaScript features are not implemented in every major browser making these features hard or impossible to use. But browsers are catching up so below you can find 6 different JavaScript features you can start using today as they are available in all major browsers. For this post let’s assume that the major browsers are Chrome, Firefox, Safari, Internet Explorer 11 and Microsoft Edge.

Async Script Execution

Every script tag or inline script is executed by the browser immediately which might add to the page load time. For some scripts (like analytics solutions) this is not necessary. You can tell the browser to execute the script asynchronously by adding the async attribute to the script tag.

<script src="script.js" async></script>

JSON

The JSON data structure has become one of the major standards for working with data in JavaScript. So it is really great that encoding and decoding of JSON are now supported in all major browsers. You can do so really simple:

// create json string from object
var json = JSON.stringify(theObject);
 
// create object from json string
var newObject = JSON.parse(jsonString);

IndexedDB

If you need to save some data in the users browser without creating a cookie the IndexedDB is one way to go. As always Mozilla has covered all the necessary technical details and you can find a simple example over at tutsplus.com. Be assured that this works in all major browsers out of the box.

Full-Screen support

If you want to display your content in full-screen mode to the user (games or videos for example) you can do so by using the fullscreen API. Please note that you need to use this with the appropriate vendor prefix (except for Microsoft Edge). To open fullscreen mode try out the below code:

// get the video tag you want to set into fullscreen mode
var video = document.getElementById("videoTag");
 
// handle the different prefixes and request fullscreen mode
if (video.requestFullscreen) {
  video.requestFullscreen();
} else if (video.msRequestFullscreen) {
  video.msRequestFullscreen();
} else if (video.mozRequestFullScreen) {
  video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
  video.webkitRequestFullscreen();
}

Web Workers

If you have a longer task you would like to perform in JavaScript you should not run them on the browser’s UI thread as the website would become unresponsive to the user. For this web workers are a simple cross-browser solution to run JavaScript on a separate background thread. You can send messages to the worker and receive messages to control the long-running task or provide the user with status updates. Head over to Mozilla for a full and detailed example of what Web Workers can do today.

Geolocation

Need to know the user’s exact location? This information can be obtained cross-browser using the Geolocation API. Please note that in every browser the user will need to allow your website to use this information. A code example could be:

// request the geolocation
navigator.geolocation.getCurrentPosition(function(position) {
  // here you can do something with the position
  alert(position);
}, function(error) {
  // here you can handle the error
  alert(error);
});

Summary

All of the above JavaScript features are implemented in all major browsers. For some, you can use polyfills to get older browser support as well but be aware that most polyfills impose a performance hit on your scripts if used.

Picture by Dmitry Baranovskiy