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 相关文章推荐
最简单的jQuery程序 入门者学习
Jul 09 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
js实现分页功能
May 24 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
JS Canvas接口和动画效果大全
Apr 29 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实现读取和编写XML DOM代码
2010/04/07 PHP
php生成静态页面的简单示例
2014/04/17 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
javascript getElementsByName()的用法说明
2009/07/31 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
python简单验证码识别的实现方法
2019/05/10 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
python实现的汉诺塔算法示例
2019/10/23 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
Python join()函数原理及使用方法
2020/11/14 Python
Java语言程序设计测试题改错题部分
2014/07/22 面试题
学生处主任岗位职责
2013/12/01 职场文书
主办会计岗位职责
2014/03/13 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
庆元旦活动总结
2014/07/09 职场文书
商业用房租赁协议书
2014/10/13 职场文书
丧事答谢词
2015/01/05 职场文书
三行辞职书范文
2015/02/26 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技