浅析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 相关文章推荐
Prototype 工具函数 学习
Jul 23 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
BootStrap中的表单大全
Sep 07 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 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
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
JavaScript 动态改变图片大小
2009/06/11 Javascript
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
JavaScript实现旋转轮播图
2020/08/18 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
python 实现波浪滤镜特效
2020/12/02 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
小学科学教学反思
2014/01/26 职场文书
效能监察建议书
2014/05/19 职场文书
诚信贷款承诺书
2014/05/30 职场文书
计划生育证明格式范本
2014/09/12 职场文书
农业项目投资意向书
2015/05/09 职场文书
创业计划书之便利店
2019/09/05 职场文书
选购到合适的激光打印机
2022/04/21 数码科技