noscript
JavaScript是一种功能强大的语言，它通过交互使网站栩栩如生，直到在浏览器中禁用JavaScript的可怕时刻突然出现。 在这个快速提示中，我们将介绍使用<noscript>元素提供后备功能。
没有JavaScript
用户可能出于多种原因禁用JavaScript。 他们可能这样做是为了应对带宽限制，以节省手机电池寿命，也许是为了保护隐私，这样就不会使用分析脚本对其进行跟踪。 少数人甚至安装了诸如NoScript之类的浏览器扩展，以防止浏览器运行JavaScript。 可以说，如果禁用了JavaScript，则许多网站和应用程序将无法运行。 如果不完全，则部分。
让我们看一些例子。
提示 ：在本教程中，我将使用Quick JavaScript Switcher ，这是一个方便的Chrome扩展程序，可让我单击一下即可切换JavaScript。
WordPress.com
新的WordPress.com帖子编辑器高度依赖JavaScript。 从下面的屏幕快照中可以看到，禁用JavaScript时，除了“ W” WordPress徽标之外，什么都没有显示。 假设大多数WordPress 用户可能都不懂技术，那么他们可能不知道正在发生什么。
特雷洛
Trello ，一个项目管理Web应用程序，高度依赖JavaScript。 但是，与WordPress.com不同，Trello会通过简单的警告告诉我们：
脸书
Facebook更好地处理了这种情况。 它显示一个通知，告诉用户正在发生的事情，并通过注销和刷新按钮以及采用移动设备优化版本的选项提供几种操作过程。 这些都以熟悉的Facebook视觉品牌呈现。
纽约时报
某些网站可能仅部分使用JavaScript，例如博客和新闻网站。 例如，当使用NewYorkTimes时 ，关闭JavaScript会发现几个空白点。 随“ 搜索”和“ 部分”链接一起出现的搜索图标消失，如下所示。
这是正常的降级（用户甚至可能没有注意到），突出显示了在关闭JavaScript时提供最佳体验的明智做法。
使用“ noscript”元素
我们如何提供后备广告很大程度上取决于我们在网站上部署JavaScript的方式，但是noscript元素在许多情况下都会派上用场。 顾名思义，我们可以使用noscript来呈现替代内容。 <noscript></noscript>标记中的所有内容仅在禁用JavaScript时才会呈现。
作为示例，我构建了一个演示页面 。 此演示复制了在Medium上看到的模糊图像加载效果。 图像和模糊效果都是通过JavaScript传递的，因此，请问关闭JavaScript后会发生什么？
图像将不会被加载。
要显示这些图像，我们可以将它们包装在noscript元素中，也可以包装样式声明，以解决定位问题。
<head>
<noscript>
<style>
figure noscript {
top: 0;
left: 0;
position: absolute;
}
</style>
</noscript>
</head>
...
<figure>
<img src="img/img-small-1.jpg"
width="30"
height="20"
class="img-small"
alt=""
data-large="img/img-large-1.jpeg"
data-large-width="1280"
data-large-height="853">
<canvas></canvas>
<figcaption>Lorem ipsum dolor sit amet.</figcaption>
<!-- fallback image -->
<noscript><img src="img/img-large-1.jpeg" height="600" width="900"></noscript>
</figure> 我们还可以使用noscript元素通知用户有关JavaScript已关闭的信息，类似于Facebook和Trello所做的事情。 此外，我们还可以添加一个参考链接，以帮助我们的用户打开 JavaScript。
结语
提供noscript作为后备是告诉网站用户有用的方法，如果没有JavaScript，事情不一定能100％起作用。 但请不要忘记，您的首要任务应该是确保缺少JavaScript（或CDN或其他众多依赖项中的任何一项）不会破坏用户的体验。 感谢Christian Heilmann确保传达了这一信息。
翻译自: https://webdesign.tutsplus.com/tutorials/quick-tip-dont-forget-the-noscript-element--cms-25498
noscript
851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
