浅析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 相关文章推荐
jquery获取div宽度的实现思路与代码
Jan 13 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
jquery实现的图片点击滚动效果
Apr 29 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
使用express来代理服务的方法
Jun 21 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 Javascript
vue实现简单的登录弹出框
Oct 26 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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
cakephp常见知识点汇总
2017/02/24 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
php框架知识点的整理和补充
2021/03/01 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
python更改已存在excel文件的方法
2018/05/03 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
优秀学生干部推荐材料
2014/02/03 职场文书
消防安全宣传标语
2014/06/07 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis