Skip navigation

Harald Markus Wirth

Site Search

Page Content:

When <noscript> doesn't work

Browser addons like NoScript, uMatrix, etc. sometimes mangle <noscript>-tags, like replacing them with their own <span>s. This code snippet forgoes <noscript> altogether and shows a simple boot screen, which even can be used by the application to show initialization progress. 

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
<title>PAGE TITLE</title>
<meta name="author"      content="MY NAME/COMPANY URL">
<meta name="description" content="LONGER DESCRIPTION CA. 60 CHARS, MAY APPEAR UNDER SEARCH RESULTS">
<meta name="keywords"    content="SOME,KEY,WORDS,HERE">
<meta name="robots"      content="index,follow">
<meta name="viewport"    content="width=device-width, initial-scale=1">
<link rel="help"          href="README">
<link rel="stylesheet"    href="default.css">
<link rel="shortcut icon" href="/favicon.ico">
<script type="module">

	addEventListener( 'load', ()=>{
		document.body.classList.remove( 'initializing' );
		document.querySelectorAll( '.noscript' ).forEach( (element)=>{
			element.parentNode.removeChild( element );
		});
	});

</script><style>

	* { margin:0; padding:0; box-sizing:border-box; }
	html, body { min-height:100vh; width:100vw; font-family:sans-serif; }
	body.initializing {
		position:absolute; z-index:10;
		display:grid; align-items:center; text-align:center;
		background:#fff; color:#000;
	}

</style></head><body class="initializing">

	<div class="noscript">
		<h1>PROGRAM NAME HERE</h1>
		<p>Please enable JavaScript!</p>
	</div>
	<script class="noscript">
		document.querySelector(".noscript p").innerText = "Initializing...";
	</script>

</body></html>

Content Management:

μCMS α1.6