微信內部瀏覽器打開網頁時提示外部瀏覽器打開升級版探討-直接跳轉默認瀏覽器打開
阿新 • • 發佈:2019-01-13
不能 在外 document nth cas -a ott 支付 filter
效果圖
在涉及移動端支付的項目時,由於對支付需求的精細化,不僅需要掃碼支付,還有喚醒App支付,另外還有在微信、QQ、支付寶內置瀏覽器給出相應的提示。
好在國內各大巨頭公司在開發瀏覽器的時候都在瀏覽器標識上加了相應的字符,下面直接貼代碼:
function is_neizhi() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return "weixin";
} else if (ua.match(/QQ/i ) == "qq") {
return "QQ";
} else if (ua.match(/Alipay/i) == "alipay" && payway == 2) {
return "alipay";
}
return false;
}
由此可以判斷是否是App內置瀏覽器或者更加精細到某App內置瀏覽器。但是略坑的是:微信支付不管是在QQ、微信還是支付寶內置瀏覽器裏面都不能被喚醒;支付寶支付可以在支付寶內置瀏覽器喚醒,其余則不能。
在外部瀏覽器打開是用jquery遮罩層方式寫的,下面直接貼代碼:
var isNeizhi = is_neizhi(); //調用上面js判斷
var winHeight = typeof window.innerHeight != ‘undefined‘ ? window.innerHeight : document.documentElement.clientHeight; //網頁可視區高度
var weixinTip = $(‘<div id="weixinTip"><p><img src="live_weixin.png" alt="微信打開"/></p></div>‘);
if(isNeizhi){
$("body").append(weixinTip);
}
$("#weixinTip" ).css({
"position": "fixed",
"left": "0",
"top": "0",
"height": winHeight,
"width": "100%",
"z-index": "1000",
"background-color": "rgba(0,0,0,0.8)",
"filter": "alpha(opacity=80)",
});
$("#weixinTip p").css({
"text-align": "center",
"margin-top": "10%",
"padding-left": "5%",
"padding-right": "5%"
});
$("#weixinTip p img").css({
"max-width": "100%",
"height": "auto"
});
當然,提示的圖片素材你得要有一張,最終效果如下:
效果圖
微信內部瀏覽器打開網頁時提示外部瀏覽器打開升級版探討-直接跳轉默認瀏覽器打開