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


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 Object.extend
May 18 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 Javascript
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
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 图片上添加透明度渐变的效果
2009/06/29 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
Python实现在线程里运行scrapy的方法
2015/04/07 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
信息技术教学反思
2014/02/12 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
师德师风演讲稿
2014/05/05 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
美化环境标语
2014/06/20 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL