微信内打开网页提示请在浏览器打开页面效果代码

时间：2024-03-09 11:06:23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请在微信外打开此链接</title>
</head>
<style type="text/css">
    *{
      margin:0; 
      padding:0;
    }
    a{
      text-decoration: none;
    }
    img{
      max-width: 100%; 
      height: auto;
    }
    .weixin-tip{
      display: none; 
      position: fixed; 
      left:0; 
      top:0; 
      bottom:0; 
      background: rgba(0,0,0,0.8); 
      filter:alpha(opacity=80); 
      height: 100%; 
      width: 100%; 
      z-index: 100;
    }
    .weixin-tip p{
      text-align: center; 
      margin-top: 10%; 
      padding:0 5%;
    }
  </style>
<body>
    <div class="weixin-tip">
        <p>
          <img src="https://s1.ax1x.com/2020/07/09/UmomPf.png" alt="微信打开"/>
        </p>
      </div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    $(window).on("load",function(){
      var winHeight = $(window).height();
      function is_weixin() {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
          return true;
        } else {
          return false;
        }
      }
      var isWeixin = is_weixin();
      if(isWeixin){
        $(".weixin-tip").css("height",winHeight);
        $(".weixin-tip").show();
      }else{
          window.location.href="/";
      }
    })
</script>
</body>
</html>

不多啰嗦，直接上源码。由于微信封域名实在厉害，不得已的办法，却是很有效的办法！效果自己测试

如果代码中的外链图片地址失效，这里有备用下载地址:

点我下载

 

相关文章