概述

對於某些網站來說，讓用戶一鍵把網頁加入收藏夾的設計是非常棒的，它能提醒用戶把網頁加入收藏夾，從而增加用戶的回訪率，使網站獲得更多的流量。

在PC端，只有ie和ff支持用js把網頁加入收藏夾的操作，在移動端目前都不支持把網頁加入收藏夾，除了uc手機瀏覽器，因為uc手機瀏覽器用的U4內核，經過了一些處理。

由於UC瀏覽器目前的用戶數量還是挺多的，所以探討一下UC手機瀏覽器端怎麽實現把網頁加入收藏夾是很必要的，我把結果記錄下來，供以後開發時參考。

結果

直接上結果，通過下面的代碼即可調出瀏覽器的加入收藏夾菜單：

window.location.href = "ext:add_favorite";
 

可以通過以下步驟方便的測試：

1. 打開uc瀏覽器，隨便輸入一個網站，並且進入這個網站。
2. 在地址欄輸入ext:add_favorite並點擊進入。
3. 這時就會出現加入收藏夾菜單！

所以對於一鍵加入收藏夾，只需要在一個按鈕上用JQ綁定點擊事件即可：

$('.button').on('click', function() {
    window.location.href = "ext:add_favorite";
})

uc的酷影模式

一般的網站會啟動uc的酷影模式，把PC端代碼轉化為移動端代碼，並且會自動加上“點擊收藏”的按鈕。詳細可以參考：酷影模式。

值得一提的是，只有以馬克斯程序(MaxCMS)模板建站的站點，uc才會啟動酷影模式。進入酷影模式之後，uc會自動給網站加載wapmaxcms_ad_filter.min.js，這個js裏面就有加入收藏的實現，我就是在這個js裏面趴的。

uc的pwa

令人驚喜的是，uc的U4 2.0內核實現了PWA，具體可以參考：U4 2.0 新特性 —— Add to Home Screen裏面的小視屏。

uc的開發者工具

可以到UC PLUS裏面下載uc瀏覽器開發者版本和UC瀏覽器開發者工具對UC的頁面進行調試。

操作方法：

1. 手機安裝uc瀏覽器開發者版本，電腦安裝UC瀏覽器開發者工具。
2. 手機打開USB調試。
3. 用usb把手機連接到電腦。
4. 電腦的UC瀏覽器開發者工具會自動識別，然後在手機上會彈出授權框，點擊確認即可。

PC端的加入收藏夾代碼

<script type="text/javascript">
function addFavorite(){
    var bookmarkUrl = "http://baidu.com";
    var bookmarkTitle = "baidu";

    if (window.sidebar) { // For Mozilla Firefox Bookmark
        window.sidebar.addPanel(bookmarkTitle, bookmarkUrl,"");
    } else if( window.external || document.all) { // For IE Favorite
        window.external.AddFavorite( bookmarkUrl, bookmarkTitle);
    } else { // for other browsers which does not support
         alert('瀏覽器不支持,請按 Ctrl+D 手動收藏!');
         return false;
    }
}
</script><a href="#" rel="sidebar" onclick="addFavorite()">加入收藏</a>

具體可以參考：兼容多數瀏覽器的js添加收藏夾腳本

UC手機瀏覽器js加入收藏夾