浅析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实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 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
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
python实现apahce网站日志分析示例
2014/04/02 Python
python中星号变量的几种特殊用法
2016/09/07 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
美发店5.1活动方案
2014/01/24 职场文书
六查六看剖析材料
2014/02/15 职场文书
效能监察建议书
2014/05/19 职场文书
医院搬迁方案
2014/06/14 职场文书
辞职离别感言
2015/08/04 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android