浅析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 相关文章推荐
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
移动端js图片查看器
Nov 17 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
简单通过settimeout看javascript的运行机制
May 10 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
vue实现表单录入小案例
Sep 27 Javascript
viewer.js实现图片预览功能
Jun 24 Javascript
JS删除对象中某一属性案例详解
Sep 08 Javascript
React Fragment介绍与使用详解
Nov 11 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在不同页面间传递Json数据示例代码
2013/06/08 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
JavaScript OOP面向对象介绍
2010/12/02 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
jquery map方法使用示例
2014/04/23 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
Python requests接口测试实现代码
2020/09/08 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
社区文化建设方案
2014/05/02 职场文书
电子商务专业自荐信
2014/06/02 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
客户答谢会致辞
2015/07/30 职场文书
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang