微信提示 在浏览器打开 效果实现过程解析


Posted in Javascript onSeptember 10, 2019

概述

大体思路是这样的:先建一个蒙版,蒙版放上提示的信息,然后写一个js,在页面打开的时候判断是不是用微信自带的浏览器打开的,如果是就打开蒙版,提示用浏览器打开

.基本页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>APP下载</title>
    <style type="text/css">
      td {
        line-height: 50px;
        font-size: 40px;
      }    
    </style>
  </head>
  <body style="background-color: #4DFFFF;padding-top: 400px">
    <div align="center" style="width: 100%;">
      <table>
        <tr>
          <td valign="middle">
            <a href="community.apk" rel="external nofollow" id="JdownApp">安卓下载</a>
          </td>
        </tr>
        <tr>
          <td valign="middle">
            <a href="community.ipa" rel="external nofollow" id="JdownApp2" class="btn-warn">苹果下载</a>
          </td>
        </tr>
      </table>     
    </div>
  </body>
</html>

添加蒙版

<!--引入遮蔽层-->
<div id="Mask" style="">
</div>
//蒙版样式
#Mask {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background-image: url(img/tweixinip.jpg);
  background-size: cover;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
.model-content {
  width: 100%;
  height: 100%;
  text-align: center;
  background: #ffffff;
  border-radius: 6px;
  margin: 100px auto;
  line-height: 30px;
  z-index: 10001;
}

添加js

<script type="text/javascript">
  //判断是否在微信中打开
  var ua = navigator.userAgent;
  var isWeixin = !!/MicroMessenger/i.test(ua);
  //如果使用的是微信自带浏览器,就打开蒙版
  if(isWeixin) {
    var SHOW = 0;
    document.getElementById('Mask').style.display = ++SHOW % 2 == 1 ? 'block' : 'none';
  }
</script>

最终效果

当使用浏览器打开时展示原始页面

微信提示 在浏览器打开 效果实现过程解析

当使用微信打开时展示蒙版

微信提示 在浏览器打开 效果实现过程解析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
javascript实现避免页面按钮重复提交
Jan 08 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
JS中的BOM应用
Feb 02 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 #Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 #Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 #Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 #jQuery
Elasticsearch实现复合查询高亮结果功能
Sep 10 #Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 #Javascript
js获取 gif 的帧数的代码实例
Sep 10 #Javascript
You might like
WHOIS类的修改版
2006/10/09 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
js判断节假日实例代码
2017/12/27 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python微信公众号开发平台
2018/01/25 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
CSS3 分类菜单效果
2019/05/27 HTML / CSS
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
英国工具中心:UK Tool Centre
2017/07/10 全球购物
有机童装:Toby Tiger
2018/05/23 全球购物
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server