八零岁月<!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>
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】判断是不是微信内置浏览器（公司实例）
评论前必须登录！