前端制作之微信小技巧__避免a標簽跳轉到手機自帶瀏覽器
隨著微信的越來越大眾化，微信的使用程度也越來越高。隨之，產生了一種新的推廣模式，即微信推廣。在這個微信的大平臺上會衍生出許許多多的推廣手段。而移動前端作為服務於手機用戶的手機網頁技術，也不可避免的加入進來。
一些客戶不僅僅滿足於自己的網站可以在手機瀏覽器上完美的展現出來，同時還要求可以在微信中進行廣泛推廣。這就要求移動前端的制作者在制作移動端網站的過程中，還要考慮是否兼容微信的推廣。
就制作技術而言，如果可以完美的在手機瀏覽器中顯示，那麽在微信推廣裏也可以完美顯示。因為微信中調用的網頁引擎就是你手機支持的網頁引擎。但在微信中顯示的網頁和在手機瀏覽器中顯示的網頁還是有一些細微的差別，這些細微的差別則決定了一些使用小技巧的可能。
微信對手機網頁的支持不是百分之百的，它因為自身業務發展的需要，對網站中的a標簽進行了二次封裝定義。一些使用在a標簽的js代碼，在某些特定情況下不產生效果了。而有些a標簽則莫名的產生了一些問題。
我舉2個例子來說明：
例子1：<a href="tel:400-4000-0000" >XXX</a>
這個a標簽裏的href調用的是手機號碼。當點擊這個a標簽的時候則彈出是否撥打該號碼的提示。在手機瀏覽器中使用是沒有任何問題的，但在微信中，在安卓系統手機，微信5.0.1以上版本時該標簽就失效了。（最新的微信版本是否解決了這個問題目前還不清楚）。這種情況下，將：
<a href="tel:400-4000-0000" >XXX</a>改為
<a link="tel:400-4000-0000" >
則可以解決部分安卓機型，（但不是全部的），有些機型依然不行。這個和微信客戶端有關。目前沒有找到滿意的解決辦法。
例子2：
這個例子比較抽象。我截圖說明：
當點擊閱讀全文的時候進入到一個網站的首頁，這時這個首頁下面的三個按鈕則是使用<a>標簽制作的，當點擊其中一個按鈕時，他會莫名其妙的跳回到首頁。這個是由於當前微信端調用的是微信的視圖窗口，而非本身手機瀏覽器窗口。當點擊a標簽的時候，它會由當前的微信視圖窗口自動跳到由微信調用的手機瀏覽器窗口上。所以才會出現這種情況，解決這種情況的出現則加上以下代碼即可：說原理其實就是阻止了a標簽的跳轉：
$(document).on("click","a",function (event){
event.preventDefault();
if ($(event.target).attr("href")){
location.href = $(event.target).attr("href");
} else {
location.href = $(event.target).parent().attr("href");
}
}
);
這樣一來，就可以在微信端視圖窗口中阻止了a標簽的跳轉，也就是阻止了由微信端視圖窗口跳到微信端調用的手機瀏覽器窗口的動作了。
可能有人會覺得這裏有點繞。沒有關系，介紹下面的小技巧的時候，再發一張截圖就可以說明問題了。也就不繞了。
剛才的這個界面是通過微信端的閱讀全文來進入的。此時進入的是微信端自己的視圖窗口，而非微信端調用手機瀏覽器的窗口！但是如果我在這個頁面中，隨便點擊一個可跳轉的按鈕，再進入新的頁面的時候，這個時候就不是微信端自己的視圖窗口了。而是來到了微信端調用手機瀏覽器的窗口，以下是截圖：
註意我畫紅圈的地方，如果出現了這個工具條則證明你現在已經在微信端調用手機瀏覽器的窗口中了。而
微信端自己的視圖窗口是不帶這個工具條的。就像剛才的圖那樣
這個是不帶工具條的。
這個就是微信端自己的視圖窗口和微信調用手機瀏覽器窗口二者的最大區別！
我使用的手機是iphone4s，眾所周知現在的手機屏幕是越來越大。但還是有相當一部分人在使用iphone4s，4s的屏幕較小。所以可視區域也較小。尤其高度！這個時候問題就來了。如果當前的網站只有一個頁面的話，在微信端窗口中瀏覽還尚可，但如果是多個網頁的話，當跳轉到新的頁面的時候微信會調用手機瀏覽器窗口了。此時頁面中就會出現剛才我畫紅圈部分的工具條。這個工具條再加上上面的標題欄工具條。極大的減少了可視區域的面積。能否將它去掉呢？答案是可以的。加入以下代碼就可以去掉微信中下面的工具條：
document.addEventListener(‘WeixinJSBridgeReady‘, function onBridgeReady(){
WeixinJSBridge.call(‘hideToolbar‘);
});
其實不光可以去掉下面的工具條，還可以去掉其他在微信中一些功能性按鈕。比如右上角的功能按鈕：
document.addEventListener(‘WeixinJSBridgeReady‘, function onBridgeReady(){
WeixinJSBridge.call(‘hideOptionMenu‘);
});
這個只是不經常用。如果功能按鈕都隱藏了。像什麽發送給朋友，分享到朋友圈等功能就不能用了。這也就失去了微信推廣的功能。失去了使用微信的本質。除非有特殊需求，一般是不會隱藏該按鈕的，沒有多大現實意義。
前端制作之微信小技巧__避免a標簽跳轉到手機自帶瀏覽器