微信QQ打开网页时提示用浏览器打开

于飞SEO

于 2021-06-06 15:11:55 发布

阅读量1.8k

点赞数

分类专栏：站长技术交流

本文链接：https://blog.csdn.net/q906270629/article/details/117627785

版权

站长技术交流专栏收录该内容

235 篇文章 10 订阅

订阅专栏

需求分析

使用微信或QQ打开网址时，无法在微信或QQ内打开常用下载软件，手机APP等。故此需要在微信qq里提示

功能实现

html实现

<div id='weixin-tip-box'>
        <div class="triangle_border_up">
            <span></span>
        </div>
        <div class="weixin-tip">
            <p>
                请点击右上角
            </p>
            <p class="content">
                选择"浏览器中打开"
            </p>
        </div>
    </div>

css实现

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #weixin-tip-box {
            display: none;
            position: fixed;
            right: 0;
            top: 4px;
            align-items: center;
        }
        .weixin-tip {
            background: #40b2a8;
            z-index: 100;
            padding: 8px;
            border-radius: 8px;
            margin-right: 8px
        }

        .weixin-tip p {
            text-align: center;
            font-size: 14px;
            color: #fff
        }

        .weixin-tip p.content {
            text-align: center;
            font-size: 14px
        }

        .triangle_border_up {
            width: 0;
            height: 0;
            border-width: 0 6px 12px;
            border-style: solid;
            border-color: transparent transparent #40b2a8;
            /*透明 透明  灰*/
            margin-left: 114px
        }
    </style>

javascript实现

<script type="text/javascript">
        var is_weixin = (function () {
            var ua = navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == "micromessenger") {//微信中打开网页
                return true;
            } else if (ua.match(/QQ/i) == "qq") {//qq里打开网页
                return true;
            } else {
                return false;
            }
        })();
        window.onload = function () {
            //var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;
            var tip = document.getElementById('weixin-tip-box');
            if (is_weixin) {
                tip.style.display = 'block';
                return false;
            }
        }
    </script>

实现效果

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #weixin-tip-box {
            display: none;
            position: fixed;
            right: 0;
            top: 4px;
            align-items: center;
        }
        .weixin-tip {
            background: #40b2a8;
            z-index: 100;
            padding: 8px;
            border-radius: 8px;
            margin-right: 8px
        }

        .weixin-tip p {
            text-align: center;
            font-size: 14px;
            color: #fff
        }

        .weixin-tip p.content {
            text-align: center;
            font-size: 14px
        }

        .triangle_border_up {
            width: 0;
            height: 0;
            border-width: 0 6px 12px;
            border-style: solid;
            border-color: transparent transparent #40b2a8;
            /*透明 透明  灰*/
            margin-left: 114px
        }
    </style>
    <title>app下载</title>
</head>

<body class="success">
    <div id='weixin-tip-box'>
        <div class="triangle_border_up">
            <span></span>
        </div>
        <div class="weixin-tip">
            <p>
                请点击右上角
            </p>
            <p class="content">
                选择"浏览器中打开"
            </p>
        </div>
    </div>

    <script type="text/javascript">
        var is_weixin = (function () {
            var ua = navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == "micromessenger") {//微信中打开网页
                return true;
            } else if (ua.match(/QQ/i) == "qq") {//qq里打开网页
                return true;
            } else {
                return true;
            }
        })();
        window.onload = function () {
            //var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;
            var tip = document.getElementById('weixin-tip-box');
            if (is_weixin) {
                tip.style.display = 'block';
                return false;
            }
        }
    </script>
</body>

</html>

js判断移动端使用的系统平台

var u = navigator.userAgent;
    if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
        //安卓手机
    } else if (u.indexOf('iPhone') > -1) {
        //苹果手机
    } else if (u.indexOf('Windows Phone') > -1) {
        //winphone手机
    }

js判断访问网站的设备是否是PC

//平台、设备和操作系统
var system ={
win : false,
mac : false,
xll : false
};
//检测平台
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
//跳转语句
if(system.win||system.mac||system.xll){
alert("PC访问");
}else{
alert("非PC访问");
}