Skip to content Skip to sidebar Skip to footer

In HTML Webpage, The Content Within Noscript Tags Are Not Getting Rendered By Browsers With Script Blocking Extension

In HTML webpage, the content within noscript tags are not getting rendered by browsers with script blocking extension. I have a page http://www.zen76171.zen.co.uk/aaa2.html with t

Solution 1:

It only works, if the <noscript> is in the body, not the head. And it's absolutely correct that it behaves like that. Just think of setting any content inside the <head>: it won't get displayed.

Won't work: <noscript> in <head>

<!doctype html>
<html>
<head>
    <noscript>aaa</noscript>
    <script>document.write("bbb")</script>
</head>
<body>
    ccc
</body>
</html>

Tested with latest Chrome and uBlock Origin extension on Windows 10 Pro on this codepen

Will work: <noscript> in <body>

<!doctype html>
<html>
<head>
</head>
<body>
    <noscript>aaa</noscript>
    <script>document.write("bbb")</script>
    ccc
</body>
</html>

Tested with latest Chrome and uBlock Origin extension on Windows 10 Pro on this codepen

Additional

On MDN <noscript> page it says (emphasis mine)

Permitted content: When scripting is disabled and when it is a descendant of the <head> element: in any order, zero or more <link> elements, zero or more <style> elements, and zero or more <meta> elements. When scripting is disabled and when it isn't a descendant of the <head> element: any transparent content, but no <noscript> element must be among its descendants. Otherwise: flow content or phrasing content.

So: If in head, only link, meta and style allowed


Solution 2:

Script blocking extensions generally work by blocking the script elements. They don't disable JavaScript support in the browser.

Since the browser itself has JS support enabled, it doesn't render noscript elements.

Use progressive enhancement instead. Start with the content for browsers where the JS doesn't work, then change it with JS.

Array.from(
    document.querySelectorAll(".nojs")
).forEach(
    node => node.remove()
);
<span class="nojs">aaa</span> ccc

Post a Comment for "In HTML Webpage, The Content Within Noscript Tags Are Not Getting Rendered By Browsers With Script Blocking Extension"