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 相关文章推荐
javascript抖动元素的小例子
Oct 28 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
全面分析JavaScript 继承
May 30 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
如何利用js在两个html窗口间通信
Apr 27 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中设置时区方法小结
2012/06/03 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
简单介绍Python中的JSON模块
2015/04/08 Python
Python单例模式的两种实现方法
2017/08/14 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
Python内置函数property()如何使用
2020/09/01 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
初中校园之声广播稿
2014/01/15 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
中小企业员工手册范本
2015/05/14 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python