javascript的渐进增强与平稳退化浅谈


Posted in Javascript onNovember 12, 2013

在google.com.hk的左上角,有一个更多的链接,它具有一个目标地址,但是当我们点击时,大多数情况发现的是弹出一个下拉列表供用户选择(这是一种典型的渐进增强形式)。怎么理解?——如果用户的浏览器支持javascript,那么就可以享受到这种快速导航的服务功能。

现在,请你禁用的你的浏览器的javascript功能(不会禁用猛击这里),再次访问google.com.hk,再次点击更多时,发生了什么?是的,没有看到下拉列表,而打开了一个新页面。(这是一种典型的平稳退化)。怎么理解?——如果用户的浏览器不支持javascript,用户仍然能够访问我的网站。

如何实现类似google的这一功能?

<script type="text/javascript">
 function displayMenu() {
    //显示导航列表;
 }
 </script>
 <a href="目标页面" onclick="displayMenu(); return false;">更多»</a>

解释:displayMenu()是一个显示导航列表的功能函数(这里省略它的实现,因为讨论的并不是这个)
onclick指定了链接的点击事件。
return false : 取消了浏览器的默认行为(这样就执行了displayMenu(),而不发生页面的跳转了),这个不可省略(当然你可省略试试看,有助于你的理解)

现在我们来看:如果你的浏览器支持javascript时,那么onclick后的代码肯定会被执行。否则,onclick后的代码不会被执行,那就会发生页面的跳转。这样不管是否支持javascript,用户都能顺利的访问我的网站。

下面是另一个类似的例子,它在新窗口中打开一个链接,但是我们并没有指定target,如果用户的浏览器不支持javascript,它将在当前页面中打开链接,如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在新窗口打开链接的另一种方式</title>
<script type="text/javascript">
function popup(url) { window.open(url); }
</script>
</head>
<body>
<ul>
    <li><a href="http://www.baidu.com/" onclick="popup(this.href); return false;">百度</a></li>
    <li><a href="http://www.google.com.hk/" onclick="popup(this.href); return false;">google</a></li>
</ul>
</body>
</html>
Javascript 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
jquery validation验证表单插件
Jan 07 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 #Javascript
JavaScript中的字符串操作详解
Nov 12 #Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 #Javascript
判定是否原生方法的JS代码
Nov 12 #Javascript
给文字加上着重号的JS代码
Nov 12 #Javascript
深入理解javascript动态插入技术
Nov 12 #Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 #Javascript
You might like
PHP Cookie的使用教程详解
2013/06/03 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
使用Python中的cookielib模拟登录网站
2015/04/09 Python
Python中文字符串截取问题
2015/06/15 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
python hough变换检测直线的实现方法
2019/07/12 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
pycharm实现猜数游戏
2020/12/07 Python
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
RealTek面试题
2016/06/28 面试题
大三自我鉴定范文
2013/10/05 职场文书
高一物理教学反思
2014/01/24 职场文书
银行工作检查书范文
2014/01/31 职场文书
招股说明书范本
2014/05/06 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
警示教育片观后感
2015/06/17 职场文书
中学语文教学反思
2016/02/16 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
解决 redis 无法远程连接
2022/05/15 Redis