欢迎来到 jackNEss'窝窝
I like simple mind

使用 <noscript> 标签,关注我们站点的 0.1% 用户

2011年09月02日

使用 noscript标签

淘宝曾做出调查,大约有0.1%的淘宝用户在访问淘宝网的时候是禁用js脚本的,虽然看似比例不大,但假设淘宝网每天有1000万人访问,那也有1万人是无法正常浏览淘宝网的,一个大型的网站是绝对不允许出现这样的问题的,为了给这0.1% 的用户 获得更友好的提示,淘宝使用 <noscript> 标签来提示用户。

<noscript>

定义和用法

noscript 标签用来定义在脚本未被执行时的替代内容(文本)。 此标签可被用于可识别 <script> 标签但无法支持其中的脚本的浏览器。

HTML 与 XHTML 之间的差异

提示和注释:

注释:如果浏览器支持脚本,那么它不会显示出 noscript 元素中的文本。

注释:无法识别 <script> 标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做,您应当在注释标签中隐藏脚本。老式的(无法识别&lt;script&gt; 标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做,您应当在注释标签中隐藏脚本。老式的(无法识别 <script> 标签的)浏览器会忽略注释,这样就不会把标签的内容写到页面上,而新式的浏览器则懂得执行这些脚本,即使它们被包围在注释标签中!

 

 

例子:

<body>
  ...
  ...

  <script type="text/javascript">
    <!--
    document.write("Hello World!")
    //-->
  </script>

  <noscript>Your browser does not support JavaScript!</noscript>
  ...
  ...
</body>

淘宝的做法

我们可以设置 禁用 javascript 之后,访问一下淘宝首页。http://www.taobao.com

然后我们发现出现了一个提示页面,提示用户是否继续访问,或者进入另外一个页面查看解决办法。

下面代码是淘宝的做法

<!--[if lte IE 8]> 

<noscript> 

<style> 

//当脚本警用时,将网页上不需要显示的模块都进行隐藏 

.html5-wrappers{display:none!important;} 

</style> 

<div class="ie-noscript-warning"> 

您的浏览器禁用了脚本,请<a href="">查看这里</a> 

来启用脚本!或者<a href="/?noscript=1">继续访问</a>. 

</div> 

</noscript> 

<![endif]-->

我们可以看到 一个很熟悉的样式名字 .html5-wrappers

首先,根据代码意思,上面黏贴的代码是针对 ie8以及以下的用户的,然后是 设置 .html5-wrappers 这个类 display:none;

其实 html5-wrappers 这个所包含的就是 html5 中新增的标签 如 <section> , <article> , <header> 等等,我们知道 由于这些新的 html5标签 在 ie8 以及一下浏览器不被识别,得通过一个js 来进行处理 从而做到向下兼容,当禁用 js 的时候,由于 这些新标签不被识别,所以定义在这些标签上面的 样式都会因此失效,从而造成就是各种错版,错位等,通过设置 display:none 就可以让这些标签 隐藏起来,使用户在浏览网页的时候不会由于这些标签内容的各种状况而 体验不良,更重要的一点,这些变异的标签有可能影响到其他正常 的标签,从而使网页变得一团糟。

然后当我们点击 继续访问 的时候,淘宝就会切换到一个 html4 版本的首页,让用户可以继续访问网站。

结语

总的来说,有一个js脚本禁用的提示对用户操作、交互都是很有帮助的,建议在开发网站时,可以考虑到这一点。淘宝为什么会成功,就是因为注重这些很小的细节。

分类HTML + CSS
阅读 1,621
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS