In HTML Webpage, The Content Within Noscript Tags Are Not Getting Rendered By Browsers With Script Blocking Extension
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"