javascript的漸進(jìn)增強(qiáng)與平穩(wěn)退化淺談
在google.com.hk的左上角，有一個更多的鏈接，它具有一個目標(biāo)地址，但是當(dāng)我們點(diǎn)擊時，大多數(shù)情況發(fā)現(xiàn)的是彈出一個下拉列表供用戶選擇（這是一種典型的漸進(jìn)增強(qiáng)形式）。怎么理解？——如果用戶的瀏覽器支持javascript，那么就可以享受到這種快速導(dǎo)航的服務(wù)功能。
現(xiàn)在，請你禁用的你的瀏覽器的javascript功能（不會禁用猛擊這里)，再次訪問google.com.hk，再次點(diǎn)擊更多時，發(fā)生了什么？是的，沒有看到下拉列表，而打開了一個新頁面。（這是一種典型的平穩(wěn)退化）。怎么理解？——如果用戶的瀏覽器不支持javascript，用戶仍然能夠訪問我的網(wǎng)站。
如何實(shí)現(xiàn)類似google的這一功能？
<script type="text/javascript">
function displayMenu() {
//顯示導(dǎo)航列表;
}
</script>
<a href="目標(biāo)頁面" onclick="displayMenu(); return false;">更多»</a>
解釋：displayMenu()是一個顯示導(dǎo)航列表的功能函數(shù)（這里省略它的實(shí)現(xiàn)，因為討論的并不是這個）
onclick指定了鏈接的點(diǎn)擊事件。
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)前頁面中打開鏈接，如下：
<!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>
相關(guān)文章
js中textContent、innerText和innerHTML的用法以及區(qū)別
這篇文章主要介紹了JavaScript中textContent、innerText和innerHTML的用法以及區(qū)別,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細(xì)介紹了小程序自定義彈框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
關(guān)于Ext中form移除textfield方法:hide(),setVisible(false)，remove()
根據(jù)條件來控制是否顯示form里的textfield表單2010-12-12
最近使用for-in語句遍歷對象屬性時發(fā)現(xiàn)遍歷順序并非屬性構(gòu)建順序,這篇文章主要給大家介紹了關(guān)于JS?for?in遍歷對象順序不對的解決辦法,需要的朋友可以參考下2023-11-11
javascript笛卡爾積算法實(shí)現(xiàn)方法
這篇文章主要介紹了javascript笛卡爾積算法實(shí)現(xiàn)方法,實(shí)例分析了笛卡爾積算法的javascript實(shí)現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
JavaScript之IE的fireEvent方法詳細(xì)解析
剛開始我以為是會跟平時使用onclick()一樣，沒想到最近在寫javascript入門ppt的時候發(fā)現(xiàn)了，原來自己太自以為是了！看來還有很多javascript的細(xì)節(jié)沒有掌握好啊2013-11-11
Javascript aop(面向切面編程)之a(chǎn)round(環(huán)繞)分析
這篇文章主要介紹了Javascript aop(面向切面編程)之a(chǎn)round(環(huán)繞) ,需要的朋友可以參考下2015-05-05
如何延遲javascript代碼的加載，加快網(wǎng)頁的訪問速度，為了讓我們的網(wǎng)頁加載速度更快，本文總結(jié)了一下幾個注意點(diǎn)，感興趣的朋友可以參考下2013-10-10
使用setTimeout實(shí)現(xiàn)SetInterval原理解析
這篇文章主要為大家介紹了使用setTimeout實(shí)現(xiàn)SetInterval原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
JavaScript蒙板(model)功能的簡單實(shí)現(xiàn)代碼
本文給大家介紹JavaScript蒙板(model)功能的簡單實(shí)現(xiàn)代碼，創(chuàng)建一個蒙板, 設(shè)置蒙板的堆疊順序保證能將其它元素蓋住，感興趣的朋友可以參考下實(shí)現(xiàn)代碼2016-08-08