【JS】判断是不是微信内置浏览器(公司实例)-八零岁月
记录所见
分享所感

【JS】判断是不是微信内置浏览器(公司实例)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>云商惠手机网站</title>
<link rel=”stylesheet” type=”text/css” href=”csss/css.css”/>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no” />
<script src=”jquery.js”></script>
<style type=”text/css”>
#apDiv1 {
position:absolute;
left:297px;
top:675px;
width:612px;
height:45px;
z-index:1;
color: #F33;
font-size: 16px;
text-align: center;
}

.win{
position:absolute;
height: 180px;
width: 340px;
font-family: “微软雅黑”;
font-size: 14px;
background:url(images/dakai.png) center no-repeat;
/*绝对居中*/
top:5%;
right:0%;
z-index: 9999;
display: none;
}

.mask{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background:#000;
opacity:0.7;
display: none;
z-index: 9998;
}
</style>
</head>
<body>
<div class=”logo”><a href=”#”><img src=”images/images_03.png” width=”240″ height=”77″ /></a></div>
<div class=”tu”><img src=”images/images_07.png” width=”340″ height=”176″ /></div>

<div class=”app”>
<img src=”images/images_11.png” width=”80″ height=”80″ />
<p>
<span>云商惠APP</span>
<tt>目前仅支持ANDROID手机</tt>
<a href=”http://p.gdown.baidu.com/8891db5807b1a25b45f703589a8cab843ee8a19cab831d2eda88f627d00271e7d254d3a7fe4f5d65231ca3c6dff92515c7ab0d1b0fe48974395eaa72c189b654c920ec3c8298346e7a858b84b81f7fa8e6ec4f0c828eabc0b2c47e1255554cacb2c0bb857a38787df85c835c26da790898948f5a90d2881bd1240614aa1c17e6ae2492d593c1bc277f8671ff22b40e988842be7c0070245491c64dbd1d237faf2a6a9fe4ab909021571f8986eb1ee940c22dd67edba46ce383278924b8eb25f4bfb7ab8228ab9785e9de02c42f25deaaa087abbb5273c6bbb818e63ffc5d170eacacb17abefe9b35c1250aa4f4faf971eef4b3bbfcd688ab75ffa5408a6d4f50caa7428efeb08b6d52308ceb7cbb5e86593f34713efde6102ae3dc4d30cdf453466ca580932a15f4a000aadb4da7c03a5ff1b45805f9e9e0″>点击下载</a>
</p>
</div>
<div class=”bottom”>
<h1><a href = “http://www.yshuw.com”><strong><u>继续访问触屏版</u></strong></a>
</h1>
<p>版权所有©2015 河南迈亿电子科技有限公司</p>
<p>专门为实体店拓客的平台:<a href=”tel:4001092990″>4001092990(点击拨打)</a> </p>
</div>

<!– 这个是弹出窗口 –>
<div class=”win”></div>
<!– 这个是灰色遮罩 –>
<div class=”mask”></div>

<script><!–

function isWeiXin(){
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == ‘micromessenger’){
return true;
}else{
return false;
}
这个例子中这一块内容是判断是不是微信内置浏览器,它只是个值,想要它有效果是需要使用它的。

//  function isWeiXin()  这是一个函数 。这个函数的返回值是布尔型的,返回的值有true/false。

不管是微信的内置浏览器还是其它浏览器 。这些浏览器都是能执行 JS 以及解析你的 HTML 和 CSS 的 。 这里的判断微信只是一个特殊的要求,就是只有在微信浏览器才显示js效果其它的不显示。

就比如一辆车   (就是 HTML+CSS+JS) , 每个人都有机会开(各种浏览器)。但是我出钱买了(微信浏览器),那就只有我能开了。

html=结构  css=表现   js=行为

 

$(function(){
//延迟1.5s
setTimeout(function(){

if(isWeiXin()){
dialog_show();
}

},1500);

});这里就开始使用了,js执行,其中的dialog_show被称为封装,把显示封装到一个函数中。直接调用函数就行了,这样简化了代码,也更容易维护。并且代码可用性高。 

function dialog_show(){ 
$(“.win”).show();
$(“.mask”).show();
}

function dialog_hide(){
$(“.win”).hide();
$(“.mask”).hide();
}

–></script>

</body>
</html>

思路:页面本身没有发生变化,只是需要判断是不是微信内置浏览器,是的话就让js效果显示出来,如果不是就不显示js即可。所以这里需要两块内容:① 判断  ② js执行动作(显示),另外,只需要考虑是不是微信,不需要考虑是不是手机。

文章转载请说明出处:八零岁月 » 【JS】判断是不是微信内置浏览器(公司实例)

分享到:更多 ()

吐槽集中营 抢沙发

评论前必须登录!