浅析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实现收缩菜单效果实例代码
Oct 30 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
4 种滚动吸顶实现方式的比较
Apr 09 Javascript
JavaScript对象属性操作实例解析
Feb 04 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
用header 发送cookie的php代码
2007/03/16 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
PHP对象实例化单例方法
2017/01/19 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
js 可拖动列表实现代码
2011/12/13 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
Python读取表格类型文件代码实例
2020/02/17 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
do you have any Best Practice for testing
2016/06/04 面试题
支行行长竞聘报告
2014/11/06 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
入党自传范文2015
2015/06/26 职场文书
详解python网络进程
2021/06/15 Python
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL
基于redis+lua进行限流的方法
2022/07/23 Redis