浅析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/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
关于JS模块化的知识点分享
Oct 16 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
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 cron中的批处理
2008/09/16 PHP
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
Python引用计数操作示例
2018/08/23 Python
python pyheatmap包绘制热力图
2018/11/09 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
Python调用JavaScript代码的方法
2020/10/27 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
致接力运动员广播稿
2014/02/17 职场文书
电子商务专业自荐信
2014/06/02 职场文书
领导班子对照检查材料
2014/09/22 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
文明单位申报材料
2014/12/23 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技