浏览器禁用JS之后

[yaofly2012]

背景

最近接到一个一句话需求：开发一个简单的页面，唯一的要求就是Support a fall-back for environments that do not support JavaScript.

如何禁用JS

浏览器都提供了相应的操作方式，直接google。

禁用JS之后浏览器的行为

不会做什么

1. 浏览器不会加载外部JS资源；
2. 浏览器不会解析执行内嵌页面里的JS代码；
3. 浏览器不会执行DOM元素绑定的事件回调函数。

做什么

1. 渲染noscript标签内容；
2. 有些浏览器会增加一些提示，比如chrome会在地址栏增加图标，在DevTools的Sources面板增加警告⚠️ 图标：

如何判断浏览器是否禁用了JS

页面开发者可能想知道浏览器是否禁用了JS，但是很遗憾浏览器禁用JS是用户的行为属于用户隐私，页面开发者是无法直接知道浏览器是否禁用了JS。

如何解决浏览器禁用JS的问题

浏览器禁用JS是用户的行为属于用户隐私，页面开发者能做的只有：

1. 提示用户，引导用户启动JS；
2. 页面不强依赖JS，即使禁用了JS页面也能正常工作。

提示用户

比如：

<noscript>
	<h1>Your Browser has disabled JS</h1>
</noscript>

或者引导用户去一个静态页面更详细的指导用户如何启动JS:

<noscript>
	<meta http-equiv="refresh" content="0; url=https://example.com/noscript-guide" />
</noscript>

降级方案

页面不强依赖JS，但现代页面的交互很大程度依赖JS，没办法只能牺牲交互了，毕竟是少数场景。
降级后的页面：

1. 利用form调用接口；

如果降级页面改动较大，可以单独实现降级页面，利用noscript重定向到降级后的页面。

<noscript>
	<meta http-equiv="refresh" content="0; url=https://example.com/noscript-fallback" />
</noscript>

参考

1. Chrome: Disable JavaScript
2. 客户端浏览器是否禁用javascript脚本（轻量级保护文章内容）
3. When to use <noscript> tag in HTML ?