你所不知道的<noscript>标签

<noscript>标签就是在当JavaScript被禁用或者不被支持时提供的一种代替方式,即 noscrip 标签中的内容会在此时被浏览器解析,作为 javascript 不可用时的备选方案。在HTML4中引入,并在body的规范中继续被支持。在HTML4中,只在 body 中起作用,在 head 中不起作用,但在HTML5中则允许出现在 head 中。代码示例如下:

<noscript>
    <p>你的浏览器不支持JavaScript</p>
</noscript>

<noscript>的作用来看,这种方式很不灵活,使用上也有一些缺陷:<noscript> 标签只支持HTML,不支持XHTML,并且只能作为一个块元素;
<noscript>只在 Javascript 被禁用时才起作用,在 Javascript 因为诸如防火墙拦截等情况下不可用时,并不会起作用;<noscript>也并不能很好地解决 Javascript 不可用时网站的可用性问题,尤其是对于大量使用 Javascript 及AJAX技术更新页面内容的网站。

现在对于绝大部分网站使用过程中不使用 JavaScript 脚本的情况只占很小的比例,在禁用状态下,如果不对其有任何的设计也是不专业的做法,降低了网站的可用性。

最佳的实践是,提示用户 Javascript 已被禁用,并同时提供一个功能简单
不依赖于 Javascrip t的代替网站供用户继续浏览,做到平稳降级。如在首页中
当脚本不可用时会提示用户,同时会提供一个不依赖于脚本的移动站点作为代替的站点,也可以直接跳转到一个不依赖脚本的代替页面中。下图,百度首页在脚本禁用时使用的代替网页,实例如下:
百度首页
为了做到禁用脚本时页面自动跳转,百度首页中添加了如下的代码:
示例代码图片
为了使得页面在脚本不可用时还能正常展示,可能需要针对部分模块设置区别脚本的禁用和启用时页面的不同风格。常用的方式是给页面的HTML标签添加一个名为no-js的 class,并在脚本中添加移除此 class逻辑。在样式代码中可以这样设置不同状态下的样式:

/*脚本启用时的样式*/
        .product {

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

        }

猜你喜欢

转载自blog.csdn.net/weixin_39045219/article/details/80266253