All geek questions in one place

Should the <noscript> element be used?

I found some good cons here:

  • The noscript element only determines whether JavaScript is enabled in the browser or not. If JavaScript is disabled in the firewall and not in the browser, JavaScript will not be launched and the contents of the noscript element will not be displayed.

  • Many scripts depend on a specific function or functions of a supported language so that they can be run (e.g. document.getElementById). If the required functions are not supported, JavaScript cannot work, but since JavaScript itself is supported, noscript content will not be displayed.

  • The most useful place to use the noscript element is at the top of the page, where it can selectively determine which styles and meta elements will be applied to the page, since the page is loading, rather than waiting until the page is loaded. Unfortunately, the noscript element is valid only in the body of the page and therefore 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 content, CSS for appearance, and JavaScript for behavior. Using a noscript element is applying behavior inside HTML, not applying it to JavaScript.

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

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

+57
source share
9 answers

It is better to have non-javascript by default, and then let the javascript code be rewritten on a javascript-enabled page. There should not be much. It may just be a display:none; block display:none; which is then set to display:block; by javascript, and vice versa for a non-js page.

+38
source

After much thought and changing my code back and forth, I think I now have a clearer picture, and I would like to share my two cents on this 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 to consider:

Case 1 - If necessary, the script is inline

JavaScript is disabled

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

JavaScript support

  • The content in the <noscript> element is not displayed at all, the displayed js is displayed
  • Content in the <div> element may appear momentarily before hiding, js displayed content

For this case, it is useful to use the <noscript> element.

Case 2 - If necessary, the script is from an external (external) source, but hiding the <div> element is performed using the built-in script

JavaScript is disabled

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

JavaScript is enabled, but script is required.

  • The content in the <noscript> element is not displayed at all, nothing is displayed!
  • The content in the <div> element may appear for a moment before hiding, nothing is displayed!

JavaScript is enabled and a script is required

  • The content in the <noscript> element is not displayed at all, the displayed js is displayed
  • Content in the <div> element may appear momentarily before hiding, js displayed content

For this case, it is useful to use the <noscript> element.

Case 3 - If necessary, the script hides the <div> element

JavaScript is disabled

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

JavaScript is enabled, but script is required.

  • The content in the <noscript> element is not displayed at all, nothing is displayed!
  • Content is displayed in the <div> element, non-js content is displayed

JavaScript is enabled and a script is required

  • The content in the <noscript> element is not displayed at all, the displayed js is displayed
  • Content in the <div> element may appear momentarily before hiding, js displayed content

For this case, it is useful to use the <div> element.

Finally

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

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

Although Tor Valamo has an elegant answer to this problem, there is a problem that may make you refuse to use this technique.

The problem is (usually) IE. It tends to load and run JS a little slower than other browsers, forcing it to sometimes turn on the “Please Enable Your Javascript” div for a split second before it loads JS and hides the div.

This is annoying, and you can get around this with the help of "classics". <noscript> forwarding approach.

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

This is the most difficult technique that I have encountered in relation to this little trouble.

+8
source

One useful noscript app I've seen is progressive asynchronous loading of heavy content (especially below the fold). Large images, iframes, etc. You can wrap it in noscript in an HTML source, and then the expanded elements can be added to the page using JavaScript after the DOM is ready. This unlocks the page and can significantly speed up the initial loading, especially if your interface depends on the JS / JQ interactions used after the document is ready (2 seconds versus 6 seconds for the portfolio page I consulted for).

+5
source

Today, almost every browser runs Javascript, but you will never know who will access your site. These days, even on-screen programs and web crawlers use Javascript and sometimes make AJAX requests if they should.

However, if you are going to return to without Javascript, there is a much better way than the <noscript> . Just do it in the HEAD your document:

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

With this technique, you can easily reference the Q_js class in CSS to hide things. With the <noscript> best of all, you can hope to include an additional CSS file to override the previous CSS. This becomes important when some elements with static content should be hidden right away (rather than flickering) until Javascript makes them more dynamic.

In short, the method I suggested applies to all of your minuses 1-5, and I believe that this is strictly better than using <noscript> .

+5
source

simple idea this time your site can adapt to using javascript on slow devices using the noscript tag as an entity for the entire contents of your site ** ( your html should be prepared without javascript and all controls should also work if javascript is turned off, users using the basic html controls can do everything they did before when javascript was active, so <noscript></noscript> can be dynamically switching to the same content in a different way with the same results = re The problem is why users open your url ). ** You can see that regardless of whether javascript or not, the functionality of the website can be “the same” in any case js enabled / disabled. In Chinese, slow devices, for example: Samsung neo mini phone, this method can launch a website without any delays with low Internet traffic. try running this automatic dual functionality site if js is in / in 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 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 views so entirely Planet beneficts</h1><p></a> <br> run this code in two instances :<br>with browser javascript enable <br>and without(browser javascript disable or eg a firefox plugin noscript states on/off) </p> </noscript> </BODY></HTML>

and say more about it. The correct noscript was invented to work as a trigger when js is disabled, but you can bypass this function to change the course of internet functions about how, now, change the dynamics ....

+2
source

I create full height, full width, position: fixed div on 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. It worked for me. Sorry, this case is only suitable if you want the user to always include his javascript.

0
source

to answer RAAJ that the script added

**

 <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){ });

**

Computer science was invented to solve problems. Programmers solve problems and are not part of the problem. Imagine that Raj, as a grandfather who never saw a laptop, never appears on the screen, that he lacks JavaScript! In some countries, grandparents throw their laptops out of the window!

User Interface = UI was invented for the convenience of the user, NOT AGAINST THE USER. ** I NEVER AGREE TO THIS PRACTICE TO AVOID ACCESS WHERE THE RESOURCE WILL NOT MISS. ** As my programmer, less resources should be used to solve the problem. This determines the quality of coding! For this reason, I wrote a solution from above, as it was invented for the same reasons.

 If {} Else {}

see'Ya ArounD!

0
source

I recommend that you do not 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 no circumstances JS is enabled, the message will be displayed differently if the user is redirected to the landing page.

-nine
source

Source: https://habr.com/ru/post/1436792/

More articles:


All Articles