快捷導(dǎo)航

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

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

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

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

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

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

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

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

下面是另一個類似的例子，它在新窗口中打開一個鏈接，但是我們并沒有指定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>

您可能感興趣的文章: