making your site noscript compatible

Posted: July 26th, 2020

Sometimes there's no way around using JavaScript. Except for the JavaScript part (I hate JS), this is fine if it wasn't for the fact that some people just don't have JavaScript enabled. Users with NoScript or text-based browsers might run into difficulty using your website if you don't account for them.

If you want to elegantly work with both JS-enabled and -disabled users, simply using JavaScript DOM manipulation can get the job done, by only adding the relevant JavaScript-related HTML elements if JavaScript is enabled.

<!-- Original HTML !-->
<span id="switchContainer">
    This content can only be viewed with JavaScript enabled.
</span
// javascript
function loadJs() {
    let switchHTML = '<label class="switch"><input type="checkbox" id="switch"><span class="slider round"></span></label>';
    document.getElementById('switchContainer').innerHTML = switchHTML;
}
window.onload = loadJs;

If you have JavaScript enabled, you'll see a toggle below. This toggle represents something that you might want to do with JavaScript, such as a color scheme switcher. If JavaScript is disabled, in its place you'll see "This content can only be viewed with JavaScript enabled."

This content can only be viewed with JavaScript enabled.