浅析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 28 Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
Dec 27 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 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和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
PHP实现下载功能的代码
2012/09/29 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
python 字典操作提取key,value的方法
2019/06/26 Python
python调用webservice接口的实现
2019/07/12 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
幼儿园实习生辞职信
2014/01/20 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书