h5 浏览器唤醒app 兼容版本

最新推荐文章于 2024-04-26 16:17:59 发布

前端黑眼圈

最新推荐文章于 2024-04-26 16:17:59 发布

阅读量1.5k

点赞数 1

分类专栏： js HTML 文章标签： chrome 前端 javascript

本文链接：https://blog.csdn.net/qq_36595944/article/details/121291860

版权

js 同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

HTML

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>home-callapp-lib示例</title>
</head>
<script src="https://g.alicdn.com/code/lib/vConsole/3.3.4/vconsole.min.js"></script>
<script>
    console.log(new VConsole());
</script>
<style>
    button,
    .btn {
        display: block;
        margin: 20px auto;
        width: 100%;
        height: 80px;
        background: #3b82fe;
        border: 0 none;
        border-radius: 10px;
        font-size: 30px;
        color: #fff;
        text-align: center;
        line-height: 80px;
        overflow: hidden;
    }
</style>

<body>
    <button id='call-button' onclick="lyopen()">点击唤起app-home</button>
</body>
<script>
    var schemeURL = 'openapp.jdmobile://';   //deeplink 唤醒链接

    var ua = navigator.userAgent.toLocaleLowerCase(); // 版本号比较
    var isAndroid = /android/i.test(ua);
    var isIos = /iphone|ipad|ipod/i.test(ua);
    var isWechat = /micromessenger\/([\d.]+)/i.test(ua);
    var isWeibo = /(weibo).*weibo__([\d.]+)/i.test(ua);
    var isBaidu = /(baiduboxapp)\/([\d.]+)/i.test(ua);
    var isQQ = /qq\/([\d.]+)/i.test(ua);
    var isQQBrowser = /(qqbrowser)\/([\d.]+)/i.test(ua);
    var isXiaomi = /MiuiBrowser/ig.test(ua);
    var isUC = navigator.appVersion.split('UCBrowser/').length > 1 ? 1 : 0;
    console.log(isUC, 'isUC');
    var isQzone = /qzone\/.*_qz_([\d.]+)/i.test(ua); // 安卓 chrome 浏览器，包含 原生chrome浏览器、三星自带浏览器、360浏览器以及早期国内厂商自带浏览器

    var isOriginalChrome = /chrome\/[\d.]+ mobile safari\/[\d.]+/i.test(ua) && isAndroid && ua.indexOf('Version') < 0;
    // var isOriginalChrome = /chrome\/[\d.]+ mobile safari\/[\d.]+/i.test(ua);
    console.log(isOriginalChrome);
    /**
     * 获取 ios 大版本号
     */
    var getIOSVersion = function getIOSVersion() {
        var version = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);
        return Number.parseInt(version[1], 10);
    };

    /**
     * 获取 微信 版本号
     */
    var getWeChatVersion = function getWeChatVersion() {
        var version = navigator.appVersion.match(/micromessenger\/(\d+\.\d+\.\d+)/i);
        return version[1];
    };

    var semverCompare = function semverCompare(verionA, versionB) {
        // eslint-disable-next-line no-restricted-properties
        var _window = window,
            isNaN = _window.isNaN;
        var splitA = verionA.split('.');
        var splitB = versionB.split('.');

        for (var i = 0; i < 3; i++) {
            var snippetA = Number(splitA[i]);
            var snippetB = Number(splitB[i]);
            if (snippetA > snippetB) return 1;
            if (snippetB > snippetA) return -1; // e.g. '1.0.0-rc' -- Number('0-rc') = NaN

            if (!isNaN(snippetA) && isNaN(snippetB)) return 1;
            if (isNaN(snippetA) && !isNaN(snippetB)) return -1;
        }

        return 0;
    };
    /**
     * 判断页面是否隐藏（进入后台）
     */

    function isPageHidden() {
        if (typeof hidden === 'undefined') return false;
        return document[hidden];
    }
    /**
     * 通过 top.location.href 跳转
     * @param {string}} [uri] - 需要打开的地址
     */


    function evokeByLocation(uri) {
        console.log(uri);
        window.top.location.href = uri;
    }

    /**
     * 通过 A 标签唤起
     * @param {string} uri - 需要打开的地址
     */

    function evokeByTagA(uri) {
        var tagA = document.createElement('a');
        tagA.setAttribute('href', uri);
        tagA.style.display = 'none';
        document.body.append(tagA);
        tagA.click();
        window.setTimeout(function() {
            document.body.removeChild(tagA);
        }, 3000)
    }
    /**
     * 通过 iframe 唤起
     * @param {string} [uri] - 需要打开的地址
     */

    function evokeByIFrame(uri) {
        if (!iframe) {
            iframe = document.createElement('iframe');
            iframe.style.cssText = 'display:none;border:0;width:0;height:0;';
            document.body.append(iframe);
        }

        iframe.src = uri;
        window.setTimeout(function() {
            document.body.removeChild(iframe);
        }, 3000)
    }



    function lyopen() {
        if (isIos) {
            if (isWechat && semverCompare(getWeChatVersion(), '7.0.5') === -1 || isWeibo) {
                console.log(2);
                evokeByLocation(linkUrl);
            } else if (getIOSVersion() < 9) {
                console.log(3);
                evokeByIFrame(schemeURL);
            } else if (isQQ || isQQBrowser || isQzone) {
                console.log(4);
                evokeByTagA(schemeURL);
            } else if (isQQ || isQQBrowser || isQzone) {
                console.log(4);
                evokeByTagA(schemeURL);
            } else {
                console.log(5);
                evokeByTagA(schemeURL);
            } // Android

        } else if (isOriginalChrome) {
            console.log(7);
            evokeByLocation(schemeURL);
        } else if (isWechat || isBaidu || isWeibo || isQzone) {
            console.log(10);
            evokeByLocation(schemeURL);
        } else if (isXiaomi) {
            evokeByTagA(schemeURL);
        } else if (isUC) {
            console.log(13);
            evokeByIFrame(schemeURL);
        } else {
            console.log(11);
            evokeByTagA(schemeURL);
            checkOpenFall = this.fallToFbUrl;
        }
        setTimeout(() => {
        //判断三秒内浏览器页面是否被隐藏，决定是否跳转  linkUrl 我们的需求是跳转网页。也可以换成下载地址（随机应变）
            var pageHidden = isPageHidden();
            console.log(pageHidden);
            if (!pageHidden) {
                evokeByLocation(linkUrl);
            }

        }, 2500);

    }
</script>

</html>

前端黑眼圈

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
h5 浏览器唤醒app 兼容版本

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>ho
复制链接

扫一扫