打开 Drupal 的新后台,发现显示大面积空白

。本以为是 CSS 的问题,后来折腾好久才发现是我之前因为某些站的安全问题把浏览器的 Javascript 给禁用了。Javascript 的日益强大使我们的网页丰富多彩,交互越来越强大,功能越来越炫。但是有的网页效果完全依赖 Javascript 来实现,一旦离开了 Javascript 的支持,可能连基本的内容都显示不完全,这时候,我们老当益壮的noscript标签就该出场了

noscript标签是一个相当古老的标签,其被引入的最初目的是帮助老旧浏览器的平滑升级更替,因为早期的浏览器并不能支持 JavaScript。noscript 标签在不支持JavaScript 的浏览器中显示替代的内容。这个元素可以包含任何 HTML 元素。这个标签的用法也非常简单:

<noscript>
<p>本页面需要浏览器支持(启用)JavaScript</p>
</noscript>

不过到了现在,浏览器不支持 Javascript 的事情应该已经不会出现了,但是用户也可能因为各种原因而禁用了 Javascript。如节省流量,延长电池使用时间,或者是不希望自己的隐私被各类统计/追踪脚本泄露

。也有相当一部分用户安装了类似NoScript的浏览器扩展来禁止浏览器运行 Javascript。

网站虽然不能强制用户启用浏览器的 Javascript,但是可以提示用户的浏览器已经禁用脚本,来达到更好的用户体验。例如 Fackbook 这样的提示:

noscript 标签中的元素中的内容只有在下列情况下才会显示出来:

  • 浏览器不支持脚本
  • 浏览器支持脚本,但脚本被禁用

符合上述任何一个条件,浏览器都会显示 noscript 中的内容。而在除此之外的其他情况下,浏览器不会呈现 noscript 中的内容。

写在最后

使用 noscript 标签只能给网站用户传达一个信息,即如果不启用 Javascript,网页内容和效果可能不能完全被呈现。但如果有些用户并不懂得如何去开启 Javascript的话,这样的提示信息对他也并没有什么实际的帮助。所以我们还是应该在网站设计之初多多考虑在没有 Javascript(或 HTML5,或其他依赖)的支持的情况下,如何使这样的非常规状况尽可能少的影响到用户的浏览体验。

我的个人博客,里面会有各种有意思的东西哦,欢迎关注。iamkun.com

noscript 标签,一个被忽视的重要标签的更多相关文章

  1. 被忽视的META标签之特效

    在web设计中使用js可以实现很多的页面特效,然而很多人却忽视了HTML标签中META标签的强大功效,其实meta标签也可以实现很多漂亮的页面过渡效果. META标签是HTML语言HEAD区的一个辅助 ...

  2. 被忽视的META标签之特效(页面过渡效果)

    在web设计中使用js可以实现很多的页面特效,然而很多人却忽视了HTML标签中META标签的强大功效,其实meta标签也可以实现很多漂亮的页面过渡效果. META标签是HTML语言HEAD区的一个辅助 ...

  3. HTML之:fieldset——一个不常用的HTML标签

    2016年4月14日17:10:02记录 一个不常用的HTML标签fieldset,不过我觉得比较有意思,其语法如下: <fieldset><legend>fieldset名称 ...

  4. 一个简单的jsp自定义标签

    学到了一个简单的jsp自定义标签,后面有更多的例子,会更新出来: 例子1: 步骤: 1.编写标签实现类: 继承javax.servlet.jsp.tagext.SimpleTagSupport; 重写 ...

  5. 一个完整的html 每个标签的含义

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. HashTab---Windows资源管理器的文件属性窗口中添加了一个叫做”文件校验”的标签

    HashTab 是一个优秀的 Windows 外壳扩展程序,它在 Windows 资源管理器的文件属性窗口中添加了一个叫做”文件校验”的标签.该标签可以帮助你方便地计算文件的 MD5.SHA1 与 C ...

  7. android一个倾斜的TextView,适用于标签效果

    描述: android一个倾斜的TextView,适用于标签效果 应用截图: 使用说明: <com.haozhang.lib.SlantedTextView android:layout_wid ...

  8. 使用一个CSS Class去给标签定义Style

    使用一个CSS Class去给标签定义Style 类是可重用的样式,可以添加到HTML元素. 下面是一个CSS类声明的例子: <style>   .blue-text {     colo ...

  9. Python+Selenium - 一个元素有两个标签时:一个用于显示,一个用于底层

    如下图,这种一个元素由两个标签控制的,用js改值时需要两个标签的属性值都改 改值代码 js_code = 'a = document.getElementById("lostdate&quo ...

随机推荐

  1. --@angularjs--理解Angular中的$apply()以及$digest()

    $apply() 和 $digest() 在 AngularJS 中是两个核心概念,但是有时候它们又让人困惑.而为了了解 AngularJS 的工作方式,首先需要了解 $apply() 和 $dige ...

  2. SVG的Transform使用

    SVG的Transform使用: <%@ page language="java" contentType="text/html; charset=UTF-8&qu ...

  3. LINQ 的查询_联表、分组、排序

    1.查询 var v = from s in db.Set<ScoreInfo>().ToList()group s by s.subject into scoreselect new{  ...

  4. bootstrap 树

    http://jsfiddle.net/jhfrench/GpdgF/ 把原文的i标签中的图标显示出来: 源码: <div class="tree well"> < ...

  5. Spring xml中进行autowired的方式

    可以在xml文件中进行autowired: xml: <?xml version="1.0" encoding="UTF-8"?> <bean ...

  6. ARPU值分析

    每用户平均收入(“ARPU)它由一个消费群体消费总额除以群体总人数得到. 活跃付费账户(“APA”) 平均同时在线玩家人数(“ACU”) 最高同时在线玩家人数(“PCU”)同时在线玩家数最高峰. 千人 ...

  7. Bootstrap相关的网站

    http://www.bootcss.com/ http://expo.bootcss.com/ http://www.webresourcesdepot.com/20-beautiful-resou ...

  8. 框架基础:ajax设计方案(三)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组

    马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...

  9. Mac bash rc

    ###################################### ########## .bashrc ###################################### cas ...

  10. 20个常用的Java程序块

    1.字符串有整型的相互转换 String a = String.valueOf(2);//integer to numeric string Int i = Integer.parseInt(a);/ ...