淺析JavaScript中的平穩(wěn)退化(graceful degradation)
所謂平穩(wěn)退化,就是指可以讓訪問者在瀏覽器不支持javascript或者禁用了JavaScript的時(shí)候依舊可以順利的瀏覽你的網(wǎng)頁;即,雖然有些功能無法使用,但基本操作依舊可以順利完成。
這里用在新窗口打開一個(gè)鏈接作為例子,我們知道js打開新窗口的方法:
window.open(url,name,features)
在這里,url是要打開的網(wǎng)頁的url地址,name是新窗口的名字,最后的features是一系列的參數(shù)
好,現(xiàn)在寫一個(gè)簡(jiǎn)單的函數(shù):
function openwindow(winUrl){ window.open(winUrl,"new window","width = 320 , height = 480") }
然后可以使用偽協(xié)議調(diào)用該函數(shù):
<a href = "javascript:openwindow('http://www.google.com');">google</a>
這樣的做法,可以在支持“JavaScript:”偽協(xié)議的瀏覽器里正常運(yùn)行,不支持JavaScript的瀏覽器會(huì)嘗試打開鏈接但失敗,而在禁用了JavaScript功能的瀏覽器里什么都不會(huì)做;
另一種做法是使用onclick:
<a href = "#" onclick = "openwindow('http://www.google.com');return false;">google</a>
在這里"#"代表著一個(gè)空鏈接,加入了return false之后,<a>標(biāo)簽不會(huì)跳轉(zhuǎn)到href指定的鏈接,在這里實(shí)際工作都在onclick里執(zhí)行。但是這樣做在禁用了JavaScript功能的瀏覽器里依舊無法打開。
那么怎樣可以解決這個(gè)問題呢,其實(shí)只需要:
<a onclick = "openwindow(http://www.google.com);return false;">google</a>
或者:
<a onclick = "openwindow(this.href);return false;">google</a>
我們使用onclick去執(zhí)行JavaScript的函數(shù),但是在href屬性里也確實(shí)填寫了url,這樣,如果是在禁用了JavaScript 的瀏覽器里,雖然不能打開一個(gè)新窗口,在新窗口里打開連接,但是至少是可以跳轉(zhuǎn)到目標(biāo)網(wǎng)頁的(當(dāng)前頁面);
最后說一下為什么要使用平穩(wěn)退化,可能會(huì)有這樣的想法:讓那些禁用了或者不支持JavaScript的瀏覽器順利訪問你的網(wǎng)站有那么重要嗎,畢竟現(xiàn)在使用不支持JavaScript或者總是禁用JavaScript功能的用戶應(yīng)該是已經(jīng)非常少的了。
確實(shí)這樣的用戶已經(jīng)非常少了,但是它很重要;
這個(gè)用戶可能是一個(gè)搜索機(jī)器人——一種自動(dòng)化程序,他們?yōu)g覽各個(gè)網(wǎng)頁的目的只是為了加入到搜索引擎的數(shù)據(jù)庫里,各大搜索引擎都有類似的程序,但是大多數(shù)的搜索機(jī)器人無法理解JavaScript代碼,所以如果你的網(wǎng)頁無法平穩(wěn)退化,會(huì)很大程度上打擊其在搜索引擎上的排名。
總結(jié)
以上所述是小編給大家介紹的JavaScript中的平穩(wěn)退化(graceful degradation),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JS實(shí)現(xiàn)獲取數(shù)組中最大值或最小值功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)獲取數(shù)組中最大值或最小值功能,結(jié)合實(shí)例形式總結(jié)分析了javascript獲取數(shù)組最大值與最小值的三種常見操作技巧,需要的朋友可以參考下2019-03-03JavaScript在圖片繪制文字兩種方法的實(shí)現(xiàn)與對(duì)比
這篇文章主要為大家詳細(xì)介紹了前端實(shí)現(xiàn)在圖片上繪制文字的兩種思路,支持即粘即貼即用,文中的示例代碼講解詳細(xì),需要的小伙伴可以了解下2024-03-03JS Object構(gòu)造函數(shù)之Object.freeze
這篇文章主要介紹了JS Object構(gòu)造函數(shù)之Object.freeze,對(duì)JS感興趣的同學(xué),可以深入了解下2021-04-04JS實(shí)現(xiàn)判斷圖片是否加載完成的方法分析
這篇文章主要介紹了JS實(shí)現(xiàn)判斷圖片是否加載完成的方法,結(jié)合實(shí)例形式分析了javascript常見的圖片加載完成判斷方法與相關(guān)操作技巧,需要的朋友可以參考下2018-07-07Javascript 更新 JavaScript 數(shù)組的 uniq 方法
2008-01-01比較詳細(xì)的javascript DOM 學(xué)習(xí)筆記
看了很多的js dom學(xué)習(xí)資料,發(fā)現(xiàn)這個(gè)比較詳細(xì),特轉(zhuǎn)載給大家學(xué)習(xí)一下2008-06-06微信小程序中的店鋪評(píng)分組件及vue中用svg實(shí)現(xiàn)的評(píng)分顯示組件
這篇文章主要介紹了微信小程序之店鋪評(píng)分組件及vue中用svg實(shí)現(xiàn)的評(píng)分顯示組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11