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

標籤：baidu   移動端   cWeb   ctr   https   建站   browser   cti   add   

概述

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

在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加入收藏夾