浅析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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
JS 创建对象(常见的几种方法)
Nov 03 Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
23个Javascript弹出窗口特效整理
Feb 25 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 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
smarty模板引擎基础知识入门
2015/03/30 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
复制本贴标题和地址的js代码
2008/07/01 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
Python实现提取文章摘要的方法
2015/04/21 Python
在Python中使用第三方模块的教程
2015/04/27 Python
Python可变参数函数用法实例
2015/07/07 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
风险评估实施方案
2014/03/09 职场文书
拉歌口号大全
2014/06/13 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
沈阳故宫导游词
2015/01/31 职场文书
裁员通知
2015/04/25 职场文书
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS