首页 » 编程语言 » html » 正文

html元素noscript标签的用法

<noscript>标签是html文档中一个比较早期的标签,它的出现是为了帮助早期浏览器的过渡升级更替的,因早期浏览器并不能支持 JavaScript,或因浏览器被禁用JavaScript时,浏览器才会解析noscrip 标签中的内容,因此,noscript标签可作为 javascript 不可用时的备选方案。

noscript标签定义:

noscript标签是在当浏览器不支持JavaScript,或浏览器已经禁用JavaScript时,就显示或执行noscript标签内的内容;

noscript标签被所有浏览器都支持 ,且它还可以包含任何HTML标签元素,除<script>元素外;

如果浏览器支持JavaScript脚本,那么浏览器不会显示出或执行 noscript标签的内容;

如果JavaScript脚本因为诸如防火墙拦截等情况下不可用时,noscript标签也不会起作用;

在HTML 4.01 与 HTML5 之间的差异

在 HTML4 中,<noscript> 标签只在<body> 区域中起作用。

在 HTML5 中,<noscript> 标签即可在 <body>区域中起作用,也可以在 <head> 头部区域中起作用

而在XHTML中,则不支持 <noscript> 标签。

noscript标签用法

包含在<noscript>元素中的内容只有在以下两种情况下才会显示或被执行:

1、浏览器不支持JavaScript脚本:

2、浏览器支持脚本,但是脚本被禁用

只要出现上述两种情况的任意一个,<noscript>元素中的内容才会被显示出来,而noscript 的用法也是非常的简单,代码如下:

<noscript><p>你的浏览器不支持JavaScript或被禁用,才会显示这部分内容</p></noscript>

如今的各种浏览器不断的升级,几乎所有的浏览器都支持 Javascript 脚本,尽管如此,但是仍然有各种原因使得用户会在浏览器中禁用Javascript脚本,比如,为了节省流量,延长电池使用时间,或者是为了防止各类JS统计代码以及追踪脚本泄露隐私信息!

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

noscript标签进阶用法

现在不使用 JavaScript 脚本的情况占比很小了,如果在禁用状态下,降低了网站的可用性,也就得不偿失了。针对这种情况,我们可以考虑以下方法处理:

1、在提示用户 Javascript 已被禁用的同时,提供一个可以直接跳转到另一个不依赖于Javascript的代替网站供用户继续浏览访问。

为了做到浏览器在禁用脚本时页面会自动跳转,你可以在页面的head区域添加了如下的代码:

<noscript>
<meta http-equiv="refresh" content="0;url=http://www.liudaima.com" >
</noscript>

在使用时,请把上面代码中的这个地址“http://www.liudaima.com”换成你希望替代的网页地址即可!

2、为了使得页面在脚本不可用时还能正常展示,可能需要针对部分模块设置区别脚本的禁用和启用时页面的不同风格。

常用的方式是给页面的HTML标签添加一个名为no-js的 class类样式,并在脚本中添加移除此 class逻辑。

在样式代码中可以这样设置不同状态下的样式:

/*脚本启用时的样式*/
    .product {        
  }
    /*脚本不可用时,通过覆盖以上的样式或者添加额外的样式来设置不同外观,*/
    no-js .product{        
  }



欢迎您发表评论或留言