浅析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 选择器理解
Mar 16 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
Vue获取微博授权URL代码实例
Nov 04 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
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
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
基于jQuery的js分页代码
2010/06/10 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
python中from module import * 的一个坑
2014/07/20 Python
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
Django多数据库联用实现方法解析
2020/11/12 Python
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
开网店计划分析
2019/07/30 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
在 Python 中利用 Pool 进行多线程
2022/04/24 Python