浅析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 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
原生js写的放大镜效果
Aug 22 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
Angular2 自定义validators的实现方法
Jul 05 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 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翻页类
2009/06/01 PHP
php重定向的三种方法分享
2012/02/22 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
php上传图片类及用法示例
2016/05/11 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
Javascript String.replace的妙用
2009/09/08 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
初学Python函数的笔记整理
2015/04/07 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
Python 获取项目根路径的代码
2019/09/27 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
python爬取抖音视频的实例分析
2021/01/19 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
2014年上半年工作自我评价
2014/01/18 职场文书
老人祝寿主持词
2014/03/28 职场文书
委托书模板
2014/04/04 职场文书
工作说明书格式
2014/07/29 职场文书
体育运动会广播稿
2014/10/05 职场文书
小学班主任个人总结
2015/03/03 职场文书
2016七夕情人节感言
2015/12/09 职场文书