1. 功能描述:
把頁面加入收藏功能，兼容各個瀏覽器
注意:
有些瀏覽器的設置就是不支持用js來把頁面加入收藏夾,只能讓用戶手動去在瀏覽器或者按鍵去設置這些功能,這里說的兼容是指當瀏覽器有這個設置的時候js會有提示.
1.ie使用：window.external.addFavorite()
2. Firefox
3.其他主流瀏覽器（chrome、opera、safari）其他瀏覽器沒有此功能，不過可以提醒用戶使用ctrl+d的方法手動添加
代碼運行嘗試1：
//加入收藏夾 function AddFavorite(sURL, sTitle) { var sTitle =" "; //sTitle：添加到收藏夾中的網站頁面標題名稱。 var sURL = location.href; //sURL：添加到收藏夾的完整網站頁面地址 try { window.external.addFavorite(sURL, sTitle);//IE瀏覽器 } catch (e) { try { window.sidebar.addPanel(sTitle, sURL, "");//Firefox瀏覽器 } catch (e) { alert("加入收藏失敗，請使用Ctrl+D進行添加"); } } } <a href="#" onclick="AddFavorite(window.location,document.title)" >加入收藏</a>
這段代碼是網上常用的收藏代碼，包括我現在工作的地方項目網站也是這么寫的，但實際上......
我們來測試一下吧
測試瀏覽器：ie,火狐瀏覽器，谷歌瀏覽器，獵豹瀏覽器，360瀏覽器，oprea瀏覽器
測試結果：火狐瀏覽器不行，360也是不行
失敗原因：
1.360 失敗原因：在ie瀏覽器下，加入收藏夾的功能是正常的，而360顯然用的是ie內核，理論上沒理由不行的，但是據某些不確定來源的消息說是新版360瀏覽器，為了安全所以禁用了加入收藏夾功能，在主程序里面寫死了一個白名單。所以你懂得.......
2.火狐瀏覽器失敗原因：官方文檔上寫的清楚，從版本23以后，sidebar.addPanel方法被拋棄，但是可以在標簽上加上rel="sidebar"來代替，
<a href="#" onclick="AddFavorite(window.location,document.title)" rel="sidebar">加入收藏</a>
找到了失敗原因，下面我們就來改一下吧!!!
function AddFavorite(sURL, sTitle) { var sTitle=''; var sURL=location.href; if (window.sidebar) return true; try{ window.external.addFavorite(sURL, sTitle); }catch(e){ alert( "加入收藏失敗，請使用Ctrl+D進行添加" ); } return false; } <a href="#" onclick="AddFavorite(window.location,document.title)" rel="sidebar">加入收藏</a>
測試瀏覽器：ie,火狐瀏覽器，谷歌瀏覽器，獵豹瀏覽器，360瀏覽器，oprea瀏覽器
測試結果：ie，火狐瀏覽器，獵豹直接彈出收藏框，其他都提示
相關知識點：
1.window.external
應用程序通過內嵌瀏覽器的方式，利用js的window.external可以達到控制窗體行為的效果，如控制窗體寬高大小，透明度，網頁截屏，網頁讀寫文件，網頁控制桌面行為等
我們在js中可以通過window.external.aaaa()來調用瀏覽器提供的外部方法aaaa。
window.external的些用法
（1）external.AddFavorite 把網站加入到用戶的收藏夾
語法:external.AddFavorite(網址，標題);
function f(){ window.external.AddFavorite(location.href, document.title); }
（2）external.AddDesktopComponent 把網站作為用戶的Active桌面
語法:external.AddDesktopComponent(地址，類型[image/website]，左距離，頂距離，寬度，長度)
function f(){ //例子 window.external.AddDesktopComponent("http://www.baidu.com/", "website",0,0,800,600); }
（3）external.NavigateAndFind 搜索指定網站中的某個字段
語法:external.NavigateAndFind(文件地址，關鍵字，_Target）
function f(){ window.external.NavigateAndFind("http://www.baidu.com/","張銀","_self"); }
（4）external.ShowBrowserUI 調用語言選擇窗口與收藏夾管理窗口
語法:external.ShowBrowserUI(類型[LanguageDialog/OrganizeFavorites], null)
<input type="button" name="button" value="語言設置" onclick="window.external.ShowBrowserUI('LanguageDialog', null)">
<input type="button" name="submit" value="整理收藏夾" onclick="window.external.ShowBrowserUI('OrganizeFavorites', null)">
（5）external.ImportExportFavorites 導入與導出用戶收藏夾
語法:external.ImportExportFavorites(導入/true 導出/false, 文件路徑)
<input type="button" name="Button" value="導入收藏夾" onclick=window.external.ImportExportFavorites(true,"http://www.baidu.com/");> <input type="button" name="Button3" value="導出收藏夾" onclick=window.external.ImportExportFavorites(false,"http://www.baidu.com/");>
2.window location
window.location 對象用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。
window.location 對象在編寫時可不使用 window 這個前綴
Window Location Hash
定義和用法
hash 屬性是一個可讀可寫的字符串，該字符串是 URL 的錨部分（從 # 號開始的部分）。
例子：
實例
假設當前的 URL 是: http://example.com:1234/test.htm#part2：
<html> <body> <script type="text/javascript"> document.write(location.hash); </script> </body> </html>
輸出：
#part2
Window Location Hostname
定義和用法
hostname 屬性是一個可讀可寫的字符串，可設置或返回當前 URL 的主機名。
語法
location.hostname
實例
假設當前的 URL 是: http://example.com:1234/test.htm#part2：
<html> <body> <script type="text/javascript"> document.write(location.hostname); </script> </body> </html>
輸出：
example.com
注意：
之前var sURL = location.hostname;
然后發現所有的瀏覽器都提示加入收藏失敗，請使用Ctrl+D進行添加，
后來才發現應該是var sURL = location.href;
Window Location Href
location.href 屬性返回當前頁面的 URL。
實例
返回（當前頁面的）整個 URL：
<script>
document.write(location.href);
</script>
以上代碼輸出為：
http://www.runoob.com/js/js-window-location.html
3. 異常處理try catch (e)
Try...Catch 聲明
try...catch可以測試代碼中的錯誤。try部分包含需要運行的代碼，而catch部分包含錯誤發生時運行的代碼。
語法：
try
{
//在此運行代碼
}
catch(err)
{
//在此處理錯誤
}
注意：try...catch使用小寫字母。大寫字母會出錯。
我們可以添加try...catch聲明，這樣當錯誤發生時可以采取更適當的措施。
使用總結：
為防止和處理一個運行時錯誤，只需要把你所要監控的代碼放進一個try塊就可以了。緊跟着try塊的，包括一個說明你希望捕獲的錯誤類型的catch子句。
也就是說
try塊中的語句首先被執行。如果運行中發生了錯誤，控制就會轉移到位於catch塊中語句，否則，catch塊的語句被跳過不執行
下面我們來看一個例子：
<script language="javascript"> try { document.writeln("開始執行try塊語句 ---> ") document.writeln("還沒有發生例外 ---> ") alert((prompt("輸入一個值：",""))) } catch(err) { document.writeln("捕捉到例外，開始執行catch塊語句 --->"); document.writeln("錯誤名稱: " + err.name+" ---> "); document.writeln("錯誤信息: " + err.message+" ---> "); } finally { document.writeln("開始執行finally塊語句") } </script>
我們輸入abc，然后確定，輸出結果如下：
“開始執行try塊語句 ---> 還沒有發生例外 ---> 捕捉到例外，開始執行catch塊語句 ---> 錯誤名稱: TypeError ---> 錯誤信息: 'abc' 未定義 ---> 開始執行finally塊語句”
上述例程以try塊語句開始，當輸出信息“還沒有發生例外”后，彈出輸入對話框，要求用戶輸入一個數值，當我們輸入非法的信息"abc"后，就引發了一個例外，所以剩下的try塊中的語句將被跳過而開始執行catch塊語句。Catch塊開始的err參數作為這個例外的錯誤對象，它具有name和message兩個屬性。最后，執行finally塊的語句。
我們看到，由於沒有錯誤發生，當try塊的語句執行完畢后，catch塊語句被跳過，出現一個窗口顯示輸入的數值，最后執行了finally塊的語句。
但是並不是所有的場合都適合try catch，大量的try catch會降低代碼的可讀性，只有在異常觸發時才會對程序的性能造成較大的影響。(參考文章：小酌重構系列[20]——用條件判斷代替異常）
流程控制語句：流程控制有它本身的邏輯，我們應該用判斷來規避try catch語句塊的使用
當使用try catch來控制程序流程時，如果程序中不存在“危險”代碼（例如：類型轉換、建立連接等），就沒有必要使用try catch，我們可以直接使用條件判斷來控制程序流程。
示例：
重構前
下面這段代碼表示“微波爐當前如果沒有被使用，那么我們就可以用它加熱食物”。
public class Microwave { private IMicrowaveMotor Motor { get; set; } public bool Start(object food) { bool foodCooked = false; try { Motor.Cook(food); foodCooked = true; } catch (InUseException) { foodcooked = false; } return foodCooked; } }
這段代碼通過是否觸發自定義異常InUseException，來決定方法Start()方法的返回值，這是典型的使用try catch語句塊來控制流程的做法。
catch語句塊捕獲了InUseException，卻沒有處理InUseException，這不僅損失了程序的性能，也未體現自定義異常InUseException的價值。
這僅僅是一個常見的邏輯判斷，我們用條件判斷就可以了。
重構后
public class Microwave { private IMicrowaveMotor Motor { get; set; } public bool Start(object food) { if (Motor.IsInUse) return false; Motor.Cook(food); return true; } }
重構以后，代碼的可讀性增強了，還消除了捕捉異常帶來的性能損失。
4. sURL = encodeURI(sURL)
使用encodeURI()編碼，解決中文亂碼問題
一般來說，URL只能使用英文字母、阿拉伯數字和某些標點符號，不能使用其他文字和符號。
網址路徑中包含漢字，使用encodeURI()編碼，解決中文亂碼問題，我們可以參考這篇文章學習下，
url的三個js編碼函數escape(),encodeURI(),encodeURIComponent()簡介，這里我就不多講了。
注意：本文為原創，轉載請以鏈接形式標明本文地址 ，謝謝合作。
本文地址：http://www.cnblogs.com/wanghuih/p/5710189.html