首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

添加JavaScript禁用的提示信息

作为Web编程语言,JavaScript使得网页的交互更丰富,用户体验更好。大部分网页都会使用JavaScript开发页面上的一些交互功能。但不幸的是,并不是所有的浏览器都支持JavaScript,比如Kindle内置的浏览器对JavaScript的支持就很弱,并且一般的浏览器也会提供让用户禁用JavaScript的选项。虽然目前JavaScript不起作用的场景很少了,但当JavaScript在浏览器上不起作用时,页面上的某些功能会不能正常工作,这样就影响这些少部分情况下的用户体验。如果开发的模块是个关键的模块,就需要考虑在JavaScript失效时如何让对应的功能正常使用。

最常用的方式是使用标签。标签就是在当JavaScript被禁用或者不被支持时提供的一种代替方式,即标签中的内容会在此时被浏览器解析,作为JavaScript不可用时的备选方案。HTML4中引入,并在HTML5的规范中继续被支持。在HTML4中,只在body中起作用,在head中不起作用,但在HTML5中则允许出现在head中。相比较HTML4规范中的定义,HTML5规范中的定义提高标签使用的灵活性。

标签常规的用法是当JavaScript不可用时显示提示信息。

示例代码:

// 一些操作

浏览器不支持JavaScript

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

The noscript element is a blunt instrument.Sometimes,scripts might be enabled,but for some reason the page’s script might fail.For this reason,it’s generally better to avoid using noscript,and to instead design the script to change the page from being a scriptless page to a scripted page on the fly.

大概的意思是说,标签不够灵活,有些时候JavaScript不可用并不是因为脚本被禁用导致的。因此,最好是不要使用标签,而是更改设计,让页面从无脚本模式过度到有脚本的模式,即从不支持脚本到支持脚本的渐进增强,从而保证两种模式下页面都可用。如下是给出的示例:

Number:

var x = document.getElementById('x');

var output = document.createElement('p');

output.textContent = 'Type a number;it will be squared right then!';

x.form.appendChild(output);

x.form.onsubmit = function () { return false;}

x.oninput = function () {

var v = x.valueAsNumber;

output.textContent = v + ' squared is ' + v * v;

};

var submit = document.getElementById('submit');

submit.parentNode.removeChild(submit);

在该示例中,当JavaScript可用时,在客户端运行JavaScript代码计算输入值的平方值。当JavaScript不可用时,把输入值提交到服务器端来计算输入值的平方值。这个示例很清晰地演示了JavaScript不可用和可用两种模式下,页面渐进增强的设计理念。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180720G20JRL00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券