微信跳转浏览器或提示手机端打开HTML代码

 

一些做微信营销活动或者需要推广下载apk文件的域名经常会红,也就是域名被封了,微信屏蔽访问了!

如图:

微信屏蔽的原理主要应该有两条:

  1. 第一是系统的自动检测
  2. 第二是微信工作人员的人工检测

至于我们防止屏蔽通常也有两种方法:(通过屏蔽和监测一些腾讯的监测IP等。从而避免系统的查杀。保证链接在微信QQ中一直可以直接打开。不用担心被封禁从而无法打开的情况!!)

1、弹框提示法,这种事最简单的方法。方式如下图(适用于下载,违规网址打开等)

这个其实就是通过判断是否是微信浏览器而实现的,如果是微信的浏览器就弹出模态框图片提示用户跳去浏览器

下面分享下泽以使用的源代码
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <title>自助下单业务平台-用心创造快乐</title>
   <link rel="stylesheet" type="text/css" href="http://caibaojian.com/demo/reset.css">
 <style type="text/css">
 /*演示用,请勿引入项目中*/
 *{margin:0; padding: 0;}
 body{font:normal 14px/1.5 Arial,Microsoft Yahei; color:#333;}
 .example{padding: 20px;}
 .example p{margin: 20px 0;}
 a{display: inline-block; background: #61B3E6; color:#fff; padding: 0 15px; border-radius: 6px; text-align: center;

 

margin: 0 8px; line-height: 25px; font-size: 20px; text-decoration: none;}
 a.btn-warn{background: #F0AD4E;}
 a:hover{opacity: 0.8;}
 /*核心css*/
  .wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%;

 

height: 100%; z-index: 998; display: none;}
  .wxtip-icon{width: 52px; height: 67px; background: url(http://img.caibaojian.com/uploads/2016/01/weixin-

 

tip.png) no-repeat; display: block; position: absolute; right: 30px; top: 20px;}
  .wxtip-txt{padding-top: 107px; color: #fff; font-size: 16px; line-height: 1.5;}
 </style>
</head>
<body>
<div class="example">
    <center>
      <img src="https://ww2.sinaimg.cn/large/005BYqpggy1fvqlisnea4g30tu028gml.jpg" alt="网站经营业务" />      <br>     <br>
       <img src="https://ws3.sinaimg.cn/large/005BYqpggy1fvwdve1xxag30rs02jjsf.jpg" alt="网站经营业务" />     <br>   <br>
      <h2><span style="color: #ff0000;"><strong>欢迎来到泽以自助下单业务平台-用心创造快乐</strong></span></h2>
<h3><span style="color: #ff0000;"><strong>因微信官方屏蔽,请用手机浏览器访问,谢谢!</strong></span></h3>    <br>
    <a href="http://zeyi.823ka.cn" id="YUEZEYI1">点击进入①号下单平台</a>
      <br>
      <br>
 <a href="http://zeyi.vt58.cn" id="YUEZEYI2" class="btn-warn">点击进入②号下单平台</a> <br>
</center>
 <div class="wxtip" id="JweixinTip">
  <span class="wxtip-icon"></span>
      <img src="https://ws3.sinaimg.cn/large/005BYqpggy1fvwdefbfc0j30f008yaa7.jpg" alt="微信跳转图片" />
  <p class="wxtip-txt">点击右上角<br/>选择在浏览器中打开</p>
 </div>
</div>
<script>
function weixinTip(ele){
var ua = navigator.userAgent;
var isWeixin = !!/MicroMessenger/i.test(ua);
if(isWeixin){
 ele.onclick=function(e){
  window.event? window.event.returnValue = false : e.preventDefault();
  document.getElementById('JweixinTip').style.display='block';
 }
 document.getElementById('JweixinTip').onclick=function(){
  this.style.display='none';
 }
}
}
var btn1 = document.getElementById('YUEZEYI1');//1
weixinTip(btn1);
var btn2 = document.getElementById('YUEZEYI2'); //2
weixinTip(btn2);
</script>
</body>
</html>

判断那种系统而强制手机端打开:

这种方法不仅可以实现微信端打开提示使用手机默认浏览器而且会判断是那种系统而去强制某种系统打开!

下面代码转自大傻逼-原文连接:https://www.cnblogs.com/s-b-b/p/5822819.html

实现思路:

1.在页面加载的时候去判断是否在微信浏览器里面,如果是就弹出模态框图片提示用户跳去浏览器下载

   var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                // 弹出模态框提示用户 
                 document.getElementById('download-modal').style.visibility = "visible";
            }

 

2.判断是否哪种系统(android,ios)

// 判断系统客户端
            var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            if(isAndroid == true){
                // alert('Android!');
                window.location = 'android.apk';
            }
            else {
                if(isiOS == true){
                    // alert('ios!');
                    window.location = 'https://itunes.apple.com/';
                }else{
                    alert('请在手机端打开');
                }
            }

最后附上源代码

<!DOCTYPE html> 
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript">
        function down(){
            // 判断是否微信浏览器
            var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                // 弹出模态框提示用户
                 document.getElementById('download-modal').style.visibility = "visible";
            }else{
                // 判断系统客户端
                var u = navigator.userAgent;
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
                var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                if(isAndroid == true){
                    // alert('Android!');
                    window.location = 'litme.apk';
                }
                else {
                    if(isiOS == true){
                        // alert('ios!');
                        window.location = 'https://itunes.apple.com/';
                    }else{
                        alert('请在手机端打开');
                    }
                }
            }
           
        }
        function closeModal(){
            var modal = document.getElementById('download-modal');
            modal.style.visibility = "hidden";
        }
    </script>
    <style type="text/css">
        .download-modal{
            visibility: hidden;
            width: 100%;
            height: 100%;
            opacity: 0.5;
            position: absolute;
            text-align: center;
            background-color:rgb(30,30,30);
            top: 0;
            left: 0;
            z-index: 9999;
        }
        .download-modal-mess{
           
        }
        #jump-to-browser{
            width: 90%;
        }
    </style>
</head>
<body onload="down()">
    <div id="download-modal" class="download-modal" onclick="closeModal()">
        <div class="download-modal-mess">
            <!-- 提示跳转用户的图片 -->
            <img src="./img/live_weixin.png" id="jump-to-browser">
        </div>
    </div>
</body>
</html>

 

本文结束

本文标签:

版权声明:微信跳转浏览器或提示手机端打开HTML代码》该篇文章出自【岳泽以博客】,如果您有任何复制、转载行为请注明原文地址!

作者:岳泽以博客

普通的的一位Web爱好者。

返回列表
上一篇:
下一篇:

发表评论

快捷回复:

评论列表 (已有22条评论)
金忠勇于侯爵2020-04-14 16:21回复
目前前端也是培训机构最喜欢开的一门课程,市场需求量时常高,奔泻适合自学的一门编程语言,由于目前软件行业的门槛已经高了很多,所以不要期望掌握一点东西就能轻松找到工作,关键问自己付出了多少,是不是真的找到学习编程的感觉,很多已经参加工作的程序员可能基本概念懂得很多,未必是真的开窍,所谓的开窍就是找到门道了,如果一直坚持这一天早晚会到来,
金忠勇于侯爵2020-04-14 13:38回复
目前前端也是培训机构最喜欢开的一门课程,市场需求量非常高,非常适合自学的一门编程语言,由于目前软件行业的门槛已经高了很多,所以不要期望掌握一点东西就能轻松找到工作,关键问自己付出了多少,是不是真的找到学习编程的感觉,很多已经参加工作的程序员可能基本概念懂得很多,未必是真的开窍了,所谓的开窍就是找到门道了,如果一直坚持这一天早晚会到来,这个时候坚持劲头就起作用了。
庄子老师侯爵2020-04-11 13:34回复
由于喜欢在闲假时间写点技术类的文章,也积攒一些粉丝,其中有个粉丝属于中专学历,在家自学前端,也差不多已经有半年的时间了,还专门在网上买了一套视频教程跟着学,中间面试了几次,也是没有找到工作很是苦恼,对于自学来讲这是常态,后来不断坚持也找到了工作,遇到这种情况唯一要做的事情就是要坚持,同时要反思自己是不是直的付出了这么多时间。
小帮子侯爵2020-04-10 10:35回复
由于喜欢在闲暇时间写点技术类的文章,也积攒一些粉丝,其中有个粉丝属于中专学历,在家自学前端,也差不多已经有半年的时间了,还专门在网上买了一套视频教程跟着学,中间面试了几次,也是没有找到工作很是苦恼,对于自学来讲这是常态,后来不断坚持也找到了工作,遇到这种情况唯一要做的事情就是就坚持,同时要反思自己是不是真的付出了这么多时间,
小精灵侯爵2020-04-09 09:51回复
由于喜欢在闲暇时间写点技术类的文章,也积攒一些粉丝,其中有个粉丝属于中专学历,在家自学前端,也差不多已经有半年的时间了,还专门在网上买了一套视频教程跟着学,中间面试了几次,也是没有找到工作很是苦恼,对于自学来讲这是常态,后来不断坚持也找到了工作,遇到这种情况唯一要做的事情就是就坚持,同时要反思自己是不是真的付出了这么多时间,是在做有效的积累,只有有效的积累才能够达到芝麻开门的效果,有些人看着表面很努力,但实际学不进东西,如果处于这种阶段就需要尝试改变,是自己不够努力还是方法不对,自学很关键一点要具备自我反省和检测能力,不具备这种意识建议不要再继续浪费时间了
小精灵侯爵2020-04-09 09:50回复
目前前端也是培训机构最喜欢开的一门课程,市场需求量非常高,非常适合自学的一门编程语言,由于目前软件行业的门槛已经高了很多,所以不要期望掌握一点东西就能轻松找到工作,关键问自己付出了多少,是不是真的找到学习编程的感觉,很多已经参加工作的程序员可能基本概念懂得很多,未必是真的开窍了,所谓的开窍就是找到门道了,如果一直坚持这一天早晚会到来,这个时候坚持劲头就起作用了。