1. 程式人生 > >H5頁面與APP的互動

H5頁面與APP的互動

概述

APP呼叫H5頁面時,出現有些頁面頁頭重複的現象,需去掉H5頁頭使用原生APP頁頭。

解決方案

方案一:

前端在網頁中寫一個隱藏頭部的方法,客戶端直接呼叫;

方案二:

使用userAgent判斷當前頁面是否在webView裡開啟:

兩種判斷方式:

1.與app端約定一個欄位,判斷ua中是否包含此欄位;

    var Href = window.location.href; 
    if (Href.indexOf("from=app") != -1) {  //判斷ua中是否包含和app端約定好的欄位:from=app
        alert('I am from app');
    } else {
        alert('I am not from app');
    }

2.判斷各個瀏覽器

//判斷是否在webView中開啟:
function openInWebview () {
    var ua = navigator.userAgent.toLowerCase()
    if (ua.match(/MicroMessenger/i) == 'micromessenger') { // 微信瀏覽器判斷
        return false;
    } else if (ua.match(/QQ/i) == 'qq') { // QQ瀏覽器判斷
        return false;
    } else if (ua.match(/WeiBo/i) == "weibo") {
        return false;
    } else {
        if (ua.match(/Android/i) != null) {
            return ua.match(/browser/i) == null;
        } else if (ua.match(/iPhone/i) != null) {
            return ua.match(/safari/i) == null;
        } else {
            return (ua.match(/macintosh/i) == null && ua.match(/windows/i) == null);
        }
    }
}

//使用方式
if (openInWebview()) {
    // 在app內開啟
    // to do something
} else {
    // 其他地方
    // 發起微信授權
}