浅析JavaScript中的平稳退化(graceful degradation)


Posted in Javascript onJuly 24, 2017

所谓平稳退化,就是指可以让访问者在浏览器不支持javascript或者禁用了JavaScript的时候依旧可以顺利的浏览你的网页;即,虽然有些功能无法使用,但基本操作依旧可以顺利完成。

这里用在新窗口打开一个链接作为例子,我们知道js打开新窗口的方法:

window.open(url,name,features)

在这里,url是要打开的网页的url地址,name是新窗口的名字,最后的features是一系列的参数

好,现在写一个简单的函数:

function openwindow(winUrl){ 
window.open(winUrl,"new window","width = 320 , height = 480") 
}

然后可以使用伪协议调用该函数:

<a href = "javascript:openwindow('http://www.google.com');">google</a>

这样的做法,可以在支持“JavaScript:”伪协议的浏览器里正常运行,不支持JavaScript的浏览器会尝试打开链接但失败,而在禁用了JavaScript功能的浏览器里什么都不会做;

另一种做法是使用onclick:

<a href = "#" onclick = "openwindow('http://www.google.com');return false;">google</a>

在这里"#"代表着一个空链接,加入了return false之后,<a>标签不会跳转到href指定的链接,在这里实际工作都在onclick里执行。但是这样做在禁用了JavaScript功能的浏览器里依旧无法打开。

那么怎样可以解决这个问题呢,其实只需要:

<a href = "http://www.google.com" onclick = "openwindow(http://www.google.com);return false;">google</a>

或者:

<a href = "http://www.google.com" onclick = "openwindow(this.href);return false;">google</a>

我们使用onclick去执行JavaScript的函数,但是在href属性里也确实填写了url,这样,如果是在禁用了JavaScript 的浏览器里,虽然不能打开一个新窗口,在新窗口里打开连接,但是至少是可以跳转到目标网页的(当前页面);

最后说一下为什么要使用平稳退化,可能会有这样的想法:让那些禁用了或者不支持JavaScript的浏览器顺利访问你的网站有那么重要吗,毕竟现在使用不支持JavaScript或者总是禁用JavaScript功能的用户应该是已经非常少的了。

确实这样的用户已经非常少了,但是它很重要;

这个用户可能是一个搜索机器人——一种自动化程序,他们浏览各个网页的目的只是为了加入到搜索引擎的数据库里,各大搜索引擎都有类似的程序,但是大多数的搜索机器人无法理解JavaScript代码,所以如果你的网页无法平稳退化,会很大程度上打击其在搜索引擎上的排名。

总结

以上所述是小编给大家介绍的JavaScript中的平稳退化(graceful degradation),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
理解javascript async的用法
Aug 22 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
JS FormData对象使用方法实例详解
Feb 12 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 #Javascript
React 子组件向父组件传值的方法
Jul 24 #Javascript
浅谈Node.js ORM框架Sequlize之表间关系
Jul 24 #Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 #Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 #jQuery
php register_shutdown_function函数详解
Jul 23 #Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 #Javascript
You might like
php 获取客户端的真实ip
2009/11/30 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
Javascript 函数中的参数使用分析
2010/03/27 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
python 异或加密字符串的实例
2018/10/14 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
python支持多继承吗
2020/06/19 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
学校中秋节活动总结
2015/03/23 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
java代码实现空间切割
2022/01/18 Java/Android