微信中下载文件

最新推荐文章于 2024-08-13 15:21:49 发布

无名大强

最新推荐文章于 2024-08-13 15:21:49 发布

阅读量5.2k

点赞数

分类专栏： js 文章标签：微信下载

js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

微信中下载文件

微信的浏览器不能下载文件，于是每次都要弹出一个遮罩，告诉用户点击右上角，用浏览器打开，核心的技术要点在于，要识别是否是微信浏览器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>微信弹出遮罩</title>
</head>
<body>
    <style type="text/css">
    *{margin:0; padding:0;}
    img{max-width: 100%; height: auto;}
    .test{height: 600px; max-width: 600px; font-size: 40px;}
    </style>
    <div class="test"><a href="http://mp.weixin.qq.com/mp/redirect?url=http://mobile.xinlianwang.com/android/distributor/DistributorApp.apk#weixin.qq.com#wechat_redirect ">有效跳转</a></div>
    <script type="text/javascript" src="http://libs.useso.com/js/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript">
        function is_weixin() {
            var ua = navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                return true;
            } else {
                return false;
            }
        }
        var isWeixin = is_weixin();
        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(isWeixin){
            $("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%"
        });
    </script>
</body>
</html>