Shouldn't we use <noscript> element?

JavascriptXhtmlWeb StandardsNoscript

Javascript Problem Overview

I found some good cons here:

  • The noscript element only detects whether the browser has JavaScript enabled or not. If JavaScript is disabled in the Firewall rather than in the browser then the JavaScript will not run and the content of the noscript element will not be displayed.

  • Many scripts are dependent on a specific feature or features of the language being supported in order for them to be able to run (for example document.getElementById). Where the required features are not supported the JavaScript is unable to run but since JavaScript itself is supported the noscript content will not be displayed.

  • The most useful place to use the noscript element is in the head of the page where it would be able to selectively determine what stylesheet and meta elements get applied to the page as the page is loading rather than having to wait until the page is loaded. Unfortunately the noscript element is only valid within the body of the page and so cannot be used in the head.

  • The noscript element is a block level element and therefore can only be used to display entire blocks of content when JavaScript is disabled. It cannot be used inline.

  • Ideally, web pages should use HTML for the content, CSS for the appearance, and JavaScript for the behavior. Using the noscript element is applying a behavior from within the HTML rather than applying it from JavaScript.

Source: http://javascript.about.com/od/reference/a/noscriptnomore.htm

I very much agree on last point. Is there a way to make and add an external <noscript> file? Should we place <noscript> in the <head>?

Javascript Solutions

Solution 1 - Javascript

It's better to have the default be non-javascript, and then let a javascript code overwrite with a javascript enabled page. Doesn't have to be much. Can just be a display:none; block, which is then set to display:block; by javascript, and vice versa for the non-js page.

Solution 2 - Javascript

After pondering for many days and changing my code back and forth, I think I have clearer picture now and would like to share my two cents worth on the subject before I forget.

<div id='noscript'>show non-js content</div>
<script>document.getElementById('noscript').style.display='none';</script>
<script id='required script'>show js content</script>

vs

<noscript>show non-js content</noscript>
<script id='required script'>//show js content</script>

Depending on the situation, there are three cases for consideration:

Case 1 - If required script is inline

JavaScript disabled

  • Content in <noscript> element appears immediately, non-js content is shown
  • Content in <div> element appears immediately, non-js content is shown

JavaScript enabled

  • Content in <noscript> element does not appear at all, js content shown
  • Content in <div> element may momentarily appear before being hidden, js content shown

For this case, using <noscript> element is advantageous.

Case 2 - If required script is from external (third-party) source, but hiding of <div> element is done with inline script

JavaScript disabled

  • Content in <noscript> element appears immediately, non-js content is shown
  • Content in <div> element appears immediately, non-js content is shown

JavaScript enabled but required script is blocked

  • Content in <noscript> element does not appear at all, nothing is shown!
  • Content in <div> element may momentarily appear before being hidden, nothing is shown!

JavaScript enabled and required script is received

  • Content in <noscript> element does not appear at all, js content shown
  • Content in <div> element may momentarily appear before being hidden, js content shown

For this case, using <noscript> element is advantageous.

Case 3 - If required script hides the <div> element

JavaScript disabled

  • Content in <noscript> element appears immediately, non-js content is shown
  • Content in <div> element appears immediately, non-js content is shown

JavaScript enabled but required script is blocked

  • Content in <noscript> element does not appear at all, nothing is shown!
  • Content in <div> element appears, non-js content is shown

JavaScript enabled and required script is received

  • Content in <noscript> element does not appear at all, js content shown
  • Content in <div> element may momentarily appear before being hidden, js content shown

For this case, using <div> element is advantageous.

In summary

Use <noscript> element if rendering of the HTML content depends on third-party scripts or if the required script is inline. Else, use <div> element and make sure that the required script contains:

document.getElementById('noscript').style.display='none';

Solution 3 - Javascript

Although Tor Valamo has an elegant answer to this problem, there is an issue which may cause you to opt out of using this technique.

The problem is (usually) IE. It has the tendency to load and execute the JS a bit slower than other browsers causing it to sometimes flash the "Please Enable Your Javascript" div for a split second before it then loads the JS and hides the div.

It is annoying and to get around this you can implement the "classic". <noscript> redirect approach.

<head>
<noscript><meta http-equiv="refresh" content="0; URL=/NO_SCRIPT_URL/ROUTE_HERE"/></noscript>
</head>

This is the most solid technique that I've come across with regards to this little nasty.

Solution 4 - Javascript

One useful application for noscript that I've seen is for a progressively-enhanced async loading of heavy content (especially "below the fold"). Big images, iframes, etc. can be wrapped in noscript in the HTML source, and then the unwrapped elements can be appended to the page using JavaScript after the DOM is ready. This unblocks the page and can make for a much quicker initial loading experience, especially if your interface relies on JS/JQ interactions applied after the document is ready (2 seconds vs. 6 seconds for a portfolio page I consulted on).

Solution 5 - Javascript

These days it seems almost every browser runs Javascript, but you can never know who is going to be accessing your site. These days even screen readers and web crawlers use Javascript, and sometimes make AJAX requests if they have to.

That said, if you're going to fall back to no-Javascript, there is a much better way than a <noscript> tag. Simply do this in the HEAD of your document:

<script type="text/javascript">
    document.getElementsByTagName('html')[0].className += ' Q_js'; // better than noscript
</script>

With this technique, you can easily refer to the Q_js class in your CSS to hide things. With the <noscript> tag, the best you can hope for is to include an additional CSS file to override previous CSS. This becomes important when some elements with static content are supposed to be hidden right away (not flicker) until Javascript can make them more dynamic.

In short, the technique I suggested addresses all your cons 1-5, and I believe it's strictly better than using <noscript>.

Solution 6 - Javascript

In the (hopefully near) future you will be able to use css @media scripting:

@media (scripting: none) {
	/* styles for when JS is disabled */
}

Solution 7 - Javascript

I create a full height, full width, position:fixed div in all pages with some id .

<div id='noscript_div' style='position:fixed;z-index:20000000;height:100%;width:100%;line-height:100%;'>enable JS buddy</div>
$('#noscript_div').hide();
$(document).ready(function(event){




});

I am not an expert . This worked for me . I am sorry but, this case will suit only if you want the user to have his javascript enabled always

Solution 8 - Javascript

the simple ideea is in this times your website may adapt to no javascript usage on slow devices using noscript tag like an entity for the entire content of your website**(your html should be prepared to no javascript and all controls must work also if javascript is off,users using basic html controls shoul be able to do everything they done before when javascript was active.So <noscript></noscript> can be the dynamic switch to the same content in other way with the same results=solving the problem wich is the reason the users open your url).**You can see is no matter javascript is or not present ,the website's functionality can be "the same" in any cases js enabled / disabled.On chinese slow devices eg:Samsung neo mini phone this method can run an website without any delays on low internet traffic.. try to run this auto double functionallity website if js is on/off cases:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>noscript can change the Internet forever</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
	$('noscript').replaceWith(function() {
		return this.textContent || this.innerText;
	});
	$("p#javascripton").css("background-color", "yellow"); 
    $("p").click(function(){
        $(this).hide();
    });
}); 
//-->
</SCRIPT>
<noscript>
<p>
Noscript's usage today can be logical for <a href="http://google.com/"><p id="javascripton">eg pc/laptop/high quality tablets usage the complete website with all features:images high resolution,javascript<br><h1>OR without javascript so no high resolutions images inserted with a jquery automated script generated from some php+javascript scripts so have usage for 80% mobile application cause almost are from China ,so low quality products=low cpu,low ram :IN THIS CASE SOMEONE CAN THINK TO SWITCH HIS PHONE TO NO JAVASCRIPT USAGE SO IF ANY PROGRAMMER CAN ADAPT AN ENTIRELY APPLICATION TO THE METHOD I USED IN THIS EXAMPLE AUTOMATED HIS BROWSER IS ADAPT FOR ANY RANDOM ACTION ABOUT THE USER CHOISE(YOU UNDERSTAND "TO USE OR NOT JAVASCRIPT") SO HIS CHINESE PHONE CAN BE APROXIMATELLY APROACH LIKE QUALITY OF SPEED EXECUTION THE OTHERS PC/LAPTOPS/TABLETS QUALITY PRODUCTS.<BR><BR>This stupid example is the best example how no script tag can change the quality of services on this planet ,boost the speed of the internet connection and stops unnecessary use of A LOT OF INTERNET TRAFFIC on slow devices..a simple tag can change the entirely dynamic of programmer's views so entirely Planet's beneficts</h1><p></a> <br>
run this code in two instances :<br>with browser javascript enable <br>and without(browser's javascript disable or eg a firefox plugin noscript states on/off)
</p>
</noscript>
</BODY></HTML>

and to say more on this .. right noscript was invented to work like a trigger when js is disabled but you can work around this feature to change the course of internet functionality about how is now ,to change it's dynamics....

Solution 9 - Javascript

Like all things, use the right tool for the job.

If you are using Google Maps API, you have a static image via tag and that gets replaced with dynamic JS map. Google have recently started charging for everything thus with the above example it's going to cost you twice, once for static and once for dynamic. The static map is only relevant if JS is disabled. Therefore to save double paying it seems to me the best solution is to wrap the tag for the static map in a

Solution 10 - Javascript

The "noscript" element is not supported in XML or in XHTML5 polyglot, so not recommended by the W3C.

I also do not like the idea that every page starts out with a no-script viewable div that is then hidden by some Javascripted circus trick on every page of a website. Dangerous and more scripting dependencies that could fail or wreak havoc if changed by a later developer.

A better strategy is to design your site with a basic html design that wraps around all inner scripted content so the user at least sees a page design with a header and a place where basic content would appear. If its empty its pretty obvious they cannot view the content for a reason. I would then add a tiny message or information icon in the footer saying, if you see no content your javascript is disabled. That appears whether they see scripted content or not. This solution is scripting free.

As a last resort you could have that message be hidden by scripts using display:none at the bottom of every web page.

It's not as sexy as providing alternate content or a message box, but in the case of heavy Angular websites you would have to create a new content page for them anyway should scripting be disabled. This solution also accounts for no script support in a user-agent versus disabled support, and makes your web page 100% XML and HTML5 compatible with all user agents by avoiding the noscript tag.

Solution 11 - Javascript

I recommend you not to use <noscript> , you can use the following code:

<HTML>
<head>
<script>
     window.location="some-page.php";
</script>
</head>
<body>
<p>
    Please active JavaScript .
</p>
</body>
</HTML>

if under any circumstance JS is not enabled , the message will be displayed otherwise user is redirected to the destination page .

Categories
Recommended Javascript Solutions
Recommended Xhtml Solutions
Recommended Web Standards Solutions
Recommended Noscript Solutions

Previous Solution:

Syntax for INSERTing into a table with no values?

SqlSql ServerTsqlInsert

Next Solution:

How to run all tests belonging to a certain Category in JUnit 4

JavaUnit TestingJunitJunit4

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJitendra VyasView Question on Stackoverflow
Solution 1 - JavascriptTor ValamoView Answer on Stackoverflow
Solution 2 - JavascriptQuestion OverflowView Answer on Stackoverflow
Solution 3 - JavascriptSteve HemsleyView Answer on Stackoverflow
Solution 4 - JavascriptGeordie KaytesView Answer on Stackoverflow
Solution 5 - JavascriptGregory MagarshakView Answer on Stackoverflow
Solution 6 - JavascriptNullView Answer on Stackoverflow
Solution 7 - JavascriptR.Raaj PrashanthView Answer on Stackoverflow
Solution 8 - JavascriptConstantinView Answer on Stackoverflow
Solution 9 - JavascriptPeterView Answer on Stackoverflow
Solution 10 - JavascriptStokelyView Answer on Stackoverflow
Solution 11 - JavascriptmohammadView Answer on Stackoverflow