易启发资源网一个让你成为创客的知识源泉,一个让你梦想成真的家园。
微信跳转浏览器或提示手机端打开HTML代码
  • 首页 > 技术教程 > 经验教程
  • 作者:cj13888
  • 2019年4月19日 8:25 星期五
  • 浏览:28
  • 字号:
  • 评论:0
  • 一些做微信营销活动或者需要推广下载apk文件的域名经常会红,也就是域名被封了,微信屏蔽访问了!

    如图:

    1.jpg

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

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

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

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

    2.jpg

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

    下面分享下泽以使用的源代码 <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>

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

    3.jpg

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

    下面代码转自大傻逼-原文连接: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>  

      您阅读这篇文章共花了:  
     本文无需标签!
    二维码加载中...
    本文作者:cj13888      文章标题: 微信跳转浏览器或提示手机端打开HTML代码
    本文地址:http://www.1316178.com/post-162.html
    版权声明:若无注明,本文皆为“易启发资源网”原创,转载请保留文章出处。

    版权所有:《易启发资源网
    文章标题:《微信跳转浏览器或提示手机端打开HTML代码
    除非注明,文章均为 《易启发资源网》 原创
    转载请注明本文短网址:http://www.1316178.com/post-162.html  [生成短网址]

    返回顶部| 首页| 手气不错| 捐赠支持| 留言板| 自定义链接| 自定义链接| sitemap| 手机版本|后花园

    Copyright © 2017-2018 易启发资源网   粤ICP备18033131号-4

    2. 3.