浅析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 相关文章推荐
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
Vue中Object.assign清空数据报错的解决方案
Mar 03 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
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
php使用PDO方法详解
2014/12/27 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
python操作ie登陆土豆网的方法
2015/05/09 Python
Python NumPy库安装使用笔记
2015/05/18 Python
python实现redis三种cas事务操作
2017/12/19 Python
python调用百度REST API实现语音识别
2018/08/30 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
python怎么判断素数
2020/07/01 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
关于python中remove的一些坑小结
2021/01/04 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
计算机求职信
2013/12/01 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
2014年党课学习材料
2014/05/11 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
高一作文之乐趣
2019/11/21 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS