Shouldn't we use

2019-01-16 02:23发布

站内问答 / JavaScript
1263 11 4

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>?

11条回答
三岁会撩人
2楼-- · 2019-01-16 03:02

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

@media (scripting: none) {
    /* styles for when JS is disabled */
}
查看更多
0人赞 添加讨论(0) 举报
Summer. ? 凉城
3楼-- · 2019-01-16 03:03

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.

查看更多
0人赞 添加讨论(0) 举报
疯言疯语
4楼-- · 2019-01-16 03:06

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';
查看更多
0人赞 添加讨论(0) 举报
三岁会撩人
5楼-- · 2019-01-16 03:07

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 tag.

查看更多
0人赞 添加讨论(0) 举报
三岁会撩人
6楼-- · 2019-01-16 03:10

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

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)