使用js檢測用戶是否在用微信瀏覽器瀏覽網站

  如今大部分的公司喜歡把本身發佈的網址轉成二維碼,而後用戶只要用手機掃一下就能登陸。而大部分的用戶都喜歡(可能不知道還有其餘掃碼工具)用微信來掃二維碼,你們都知道微信裏面自帶的瀏覽器會屏蔽大部分的外部網站,只能點擊右上角圖標,而後「點擊在瀏覽器中打開」才行。因此咱們須要就要採起一些措施爲了防止咱們的網站在用戶用微信瀏覽器打開時被屏蔽,而致使用戶不知道該怎麼辦(大部分的人都不知道)。css

  下面是判斷用戶是否在用微信瀏覽器的js瀏覽器

// 是不是微信瀏覽器
function is_weixin() {
    var ua = navigator.userAgent.toLowerCase();
    return ua.match(/MicroMessenger/i) == "micromessenger" ? true : false 
}

// 加載提示圖片
function loadHtml() {
    var div = document.createElement('div');
    div.id = 'weixin-tip';
    div.innerHTML = '<p><img src="IMG_1185.PNG" alt="微信打開"/></p>';
    document.body.appendChild(div);
}

// 設置style
function loadStyleText(cssText) {
    var style = document.createElement('style');
    style.rel = 'stylesheet';
    style.type = 'text/css';
    try {
        style.appendChild(document.createTextNode(cssText));
    } catch (e) {
        style.styleSheet.cssText = cssText; //ie9如下
    }
    var head = document.getElementsByTagName("head")[0]; //head標籤之間加上style樣式
    head.appendChild(style);
}
//CSS樣式
var cssText = "#weixin-tip{position: fixed; left:0; top:0; background: rgba(0,0,0,0.8); filter:alpha(opacity=80); width: 100%; height:100%; z-index: 100;} #weixin-tip p{text-align: center; margin-top: 10%; padding:0 5%;}";

if (is_weixin()) {
    loadHtml();
    loadStyleText(cssText);
}
IMG_1185.PNG 大概是內容大概以下:

 

紅標題的後面還有一段白色說明文字,由於背景是白色全部看不到微信

相關文章
相關標籤/搜索