发表新帖
发表新帖

How to detect if JavaScript is disabled?

后端 未结
关注
30 3431
暗喜
暗喜 2020-11-21 07:37

There was a post this morning asking about how many people disable JavaScript. Then I began to wonder what techniques might be used to determine if the user has it disabled.

相关标签:
30条回答
  • 天涯浪人
    2020-11-21 07:51

    I think you could insert an image tag into a noscript tag and look at the stats how many times your site and how often this image has been loaded.

    0 讨论(0)
  • 走了就别回头了
    2020-11-21 07:52

    If your use case is that you have a form (e.g., a login form) and your server-side script needs to know if the user has JavaScript enabled, you can do something like this:

    <form onsubmit="this.js_enabled.value=1;return true;">
    <input type="hidden" name="js_enabled" value="0">
    <input type="submit" value="go">
</form>

    This will change the value of js_enabled to 1 before submitting the form. If your server-side script gets a 0, no JS. If it gets a 1, JS!

    0 讨论(0)
  • 太阳男子
    2020-11-21 07:53

    just a bit tough but (hairbo gave me the idea)

    CSS:

    .pagecontainer {
  display: none;
}

    JS:

    function load() {
  document.getElementById('noscriptmsg').style.display = "none";
  document.getElementById('load').style.display = "block";
  /* rest of js*/
}

    HTML:

    <body onload="load();">

  <div class="pagecontainer" id="load">
    Page loading....
  </div>
  <div id="noscriptmsg">
    You don't have javascript enabled. Good luck with that.
  </div>

</body>

    would work in any case right? even if the noscript tag is unsupported (only some css required) any one knows a non css solution?

    0 讨论(0)
  • 长情又很酷
    2020-11-21 07:54

    You'll want to take a look at the noscript tag.

    <script type="text/javascript">
...some javascript script to insert data...
</script>
<noscript>
   <p>Access the <a href="http://someplace.com/data">data.</a></p>
</noscript>
    0 讨论(0)
  • 执念已碎
    2020-11-21 07:54

    People have already posted examples that are good options for detection, but based on your requirement of "give warning that the site is not able to function properly without the browser having JS enabled". You basically add an element that appears somehow on the page, for example the 'pop-ups' on Stack Overflow when you earn a badge, with an appropriate message, then remove this with some Javascript that runs as soon as the page is loaded (and I mean the DOM, not the whole page).

    0 讨论(0)
  • 情话喂你
    2020-11-21 07:54

    I've figured out another approach using css and javascript itself.
    This is just to start tinkering with classes and ids.

    The CSS snippet:
    1. Create a css ID rule, and name it #jsDis.
    2. Use the "content" property to generate a text after the BODY element. (You can style this as you wish).
    3 Create a 2nd css ID rule and name it #jsEn, and stylize it. (for the sake of simplicity, I gave to my #jsEn rule a different background color.

    <style>
#jsDis:after {
    content:"Javascript is Disable. Please turn it ON!";
    font:bold 11px Verdana;
    color:#FF0000;
}

#jsEn {
    background-color:#dedede;
}

#jsEn:after {
    content:"Javascript is Enable. Well Done!";
    font:bold 11px Verdana;
    color:#333333;
}
</style>

    The JavaScript snippet:
    1. Create a function.
    2. Grab the BODY ID with getElementById and assign it to a variable.
    3. Using the JS function 'setAttribute', change the value of the ID attribute of the BODY element.

    <script>
function jsOn() {
    var chgID = document.getElementById('jsDis');
    chgID.setAttribute('id', 'jsEn');
}
</script>

    The HTML part.
    1. Name the BODY element attribute with the ID of #jsDis.
    2. Add the onLoad event with the function name. (jsOn()).

    <body id="jsDis" onLoad="jsOn()">

    Because of the BODY tag has been given the ID of #jsDis:
    - If Javascript is enable, it will change by himself the attribute of the BODY tag.
    - If Javascript is disable, it will show the css 'content:' rule text.

    You can play around with a #wrapper container, or with any DIV that use JS.

    Hope this helps to get the idea.

    0 讨论(0)
 看不清?
提交回复
热议问题