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


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 相关文章推荐
js验证表单第二部分
Nov 25 Javascript
javascript工具库代码
Mar 29 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
tangram.js库实现js类的方式实例分析
Jan 06 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 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简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
JavaScript 变量基础知识
2009/11/07 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
python fabric使用笔记
2015/05/09 Python
使用pdb模块调试Python程序实例
2015/06/02 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
python实现控制台打印的方法
2019/01/12 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
使用python turtle画高达
2020/01/19 Python
python 自动识别并连接串口的实现
2021/01/19 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
django使用多个数据库的方法实例
2021/03/04 Python
医师定期考核实施方案
2014/05/07 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS