浏览器禁用JS之后
yaofly2012 opened this issue · comments
背景
最近接到一个一句话需求：开发一个简单的页面，唯一的要求就是Support a fall-back for environments that do not support JavaScript.
如何禁用JS
浏览器都提供了相应的操作方式，直接google。
禁用JS之后浏览器的行为
不会做什么
- 浏览器不会加载外部JS资源；
- 浏览器不会解析执行内嵌页面里的JS代码；
- 浏览器不会执行DOM元素绑定的事件回调函数。
做什么
- 渲染
noscript标签内容； - 有些浏览器会增加一些提示，比如chrome会在地址栏增加
图标，在DevTools的Sources面板增加警告⚠️ 图标：
如何判断浏览器是否禁用了JS
页面开发者可能想知道浏览器是否禁用了JS，但是很遗憾浏览器禁用JS是用户的行为属于用户隐私，页面开发者是无法直接知道浏览器是否禁用了JS。
如何解决浏览器禁用JS的问题
浏览器禁用JS是用户的行为属于用户隐私，页面开发者能做的只有：
- 提示用户，引导用户启动JS；
- 页面不强依赖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，没办法只能牺牲交互了，毕竟是少数场景。
降级后的页面：
- 利用
form调用接口；
如果降级页面改动较大，可以单独实现降级页面，利用noscript重定向到降级后的页面。
<noscript>
<meta http-equiv="refresh" content="0; url=https://example.com/noscript-fallback" />
</noscript>