Javascript Base64 dataURI detection

by Diego La Monica

HTML

<h1>Does your browser supports base 64 data URI?</h1>

<p class="is-ok">Your browser supports base64 data URI</p>
<p class="is-not-ok">Your browser does not support base64 data URI</p>



<!-- Some unuseful stuffs -->
<p>This example is related to <a href="http://diegolamonica.info/detect-if-browser-supports-base64-datauri-using-javascript">Detect if browser supports base64 dataURI using JavaScript</a>

</p>

CSS

.is-ok {
    display: none;
}
.has-b64 .is-ok {
    color: #040;
    background-color: #afa;
    display: block;
}
.is-not-ok {
    color: #040;
    background-color: #faa;
    display: block;
}
.has-b64 .is-not-ok {
    display: none;
}
/* Some unuseful stuffs */
 html, body {
    height: 100%;
    overflow: hidden;
}
body {
    background-image: url(http://diegolamonica.info/wp-content/uploads/2014/10/dlm-logo-small.png);
    background-position: bottom right;
    background-repeat: no-repeat;
}
* {
    font-family: Arial;
}
p {
    padding: 0.5em;
}

JavaScript

window.supportsBase64 = false;

var body = null;
if (document.querySelector) {
    body = document.querySelector('body');
} else {
    body = document.getElementByName('body')[0];
}

var script = document.createElement('script');
script.src = 'data:text/javascript;charset=utf-8;base64,' + btoa("window.supportsBase64=true;");
script.defer = true;
body.appendChild(script);

script.onload = function () {
    if (window.supportsBase64) {
        body.className += ((body.className !== '') ? ' ' : '') + 'has-b64';
    } else {
        alert('Sorry your browser does not support base64 dataURI');
    }
}