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


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 无符号右移赋值操作
Apr 17 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 Javascript
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
php查询相似度最高的字符串的方法
2015/03/12 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
解析js原生方法创建表格效率测试
2013/07/08 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
Python中将字典转换为列表的方法
2016/09/21 Python
浅谈Django REST Framework限速
2017/12/12 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
Pyqt5自适应布局实例
2019/12/13 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
银行毕业实习自我鉴定
2013/09/19 职场文书
汽车检测与维修个人求职信
2013/09/24 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
python全面解析接口返回数据
2022/02/12 Python
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技