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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
显示js对象所有属性和方法的函数
Oct 16 Javascript
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
javascript最常用与实用的创建类的代码
Aug 12 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
iview table高度动态设置方法
Mar 14 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
Openlayers绘制地图标注
Sep 28 Javascript
JS实现数组去重的11种方法总结
Apr 04 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 download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
python实现控制台打印的方法
2019/01/12 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
外企求职信范文分享
2013/12/31 职场文书
员工薪酬福利制度
2014/01/17 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
婚前协议书范本
2014/04/15 职场文书
英语故事演讲稿
2014/04/29 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
员工离职感谢信
2015/01/22 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
个人催款函范文
2015/06/23 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server