快捷導(dǎo)航

javascript的漸進(jìn)增強(qiáng)與平穩(wěn)退化淺談

更新時(shí)間：2013年11月12日 15:46:51 作者：

在google.com.hk的左上角，有一個(gè)更多的鏈接，它具有一個(gè)目標(biāo)地址，但是當(dāng)我們點(diǎn)擊時(shí)，大多數(shù)情況發(fā)現(xiàn)的是彈出一個(gè)下拉列表供用戶選擇（這是一種典型的漸進(jìn)增強(qiáng)形式）。怎么理解？——如果用戶的瀏覽器支持javascript，那么就可以享受到這種快速導(dǎo)航的服務(wù)功能。

現(xiàn)在，請(qǐng)你禁用的你的瀏覽器的javascript功能（不會(huì)禁用猛擊這里)，再次訪問google.com.hk，再次點(diǎn)擊更多時(shí)，發(fā)生了什么？是的，沒有看到下拉列表，而打開了一個(gè)新頁面。（這是一種典型的平穩(wěn)退化）。怎么理解？——如果用戶的瀏覽器不支持javascript，用戶仍然能夠訪問我的網(wǎng)站。

如何實(shí)現(xiàn)類似google的這一功能？

復(fù)制代碼代碼如下:

解釋：displayMenu()是一個(gè)顯示導(dǎo)航列表的功能函數(shù)（這里省略它的實(shí)現(xiàn)，因?yàn)橛懻摰牟⒉皇沁@個(gè)）
onclick指定了鏈接的點(diǎn)擊事件。
return false ：取消了瀏覽器的默認(rèn)行為（這樣就執(zhí)行了displayMenu()，而不發(fā)生頁面的跳轉(zhuǎn)了），這個(gè)不可省略（當(dāng)然你可省略試試看，有助于你的理解）

現(xiàn)在我們來看：如果你的瀏覽器支持javascript時(shí)，那么onclick后的代碼肯定會(huì)被執(zhí)行。否則，onclick后的代碼不會(huì)被執(zhí)行，那就會(huì)發(fā)生頁面的跳轉(zhuǎn)。這樣不管是否支持javascript，用戶都能順利的訪問我的網(wǎng)站。

下面是另一個(gè)類似的例子，它在新窗口中打開一個(gè)鏈接，但是我們并沒有指定target，如果用戶的瀏覽器不支持javascript，它將在當(dāng)前頁面中打開鏈接，如下：

復(fù)制代碼代碼如下:

<!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 onclick="popup(this.href); return false;">百度</a></li>
<li><a onclick="popup(this.href); return false;">google</a></li>
</ul>
</body>
</html>

您可能感興趣的文章: