用js限制网页只在微信浏览器中打开(或者只能手机端访问)


Posted in Javascript onDecember 24, 2020

用js限制网页只在微信浏览器中打开

js代码一

$(function(){
	//判断页面是否是在微信浏览器打开
	//对浏览器的UserAgent进行正则匹配,不含有微信独有标识的则为其他浏览器
 var useragent = navigator.userAgent;
 if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') {
  window.location.href = "wxError.html";//若不是微信浏览器,跳转到温馨error页面
 }
})

代码二 写成函数方便引用

/**
   * 判断是否是微信环境
   */
  function getIsWxClient () {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
      return true;
    }
    return false;
  };

代码三 微信自己写的的代码

window.isInWeixinApp = function() {
    return /MicroMessenger/.test(navigator.userAgent);
  };

页面

<!DOCTYPE html>
<html>
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 </head>
 <body>
  <script type="text/javascript">
   var ua = navigator.userAgent.toLowerCase();
   var isWeixin = ua.indexOf('micromessenger') != -1;
   var isAndroid = ua.indexOf('android') != -1;
   var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
   if (!isWeixin) {
    document.head.innerHTML = '<title>抱歉,出错了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css" rel="external nofollow" >';
    document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">请在微信客户端打开链接</h4></div></div>';
   }
  </script>
 </body>
</html>

一般情况下限制页面被pc端访问就可以了,那么就可以参考下面的代码了

在需要被pc端访问的页面的脚本里加上如下代码即可:

<script>
var system = {};
var p = navigator.platform;
var u = navigator.userAgent;

system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
if (system.win || system.mac || system.xll) {//如果是PC转
if (u.indexOf('Windows Phone') > -1) { //win手机端

} else {


window.location.href = "提示页面路径";

}
}

</script>

再附一个各大网站常用的代码

var browser = {
	versions : function () {
		var u = navigator.userAgent,
		app = navigator.appVersion;
		return {
			trident : u.indexOf('Trident') > -1,
			presto : u.indexOf('Presto') > -1,
			webKit : u.indexOf('AppleWebKit') > -1,
			gecko : u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
			mobile : !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/),
			ios : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
			android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
			iPhone : u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,
			iPad : u.indexOf('iPad') > -1,
			webApp : u.indexOf('Safari') == -1,
			QQbrw : u.indexOf('MQQBrowser') > -1,
			UCbrw : u.indexOf('UCBrowser') > -1,
			weiXin : u.indexOf('MicroMessenger') > -1,
			ucLowEnd : u.indexOf('UCWEB7.') > -1,
			ucSpecial : u.indexOf('rv:1.2.3.4') > -1,
			
			ucweb : function () {
				try {
					return parseFloat(u.match(/ucweb\d+\.\d+/gi).toString().match(/\d+\.\d+/).toString()) >= 8.2
				} catch (e) {
					if (u.indexOf('UC') > -1) {
						return true;
					} else {
						return false;
					}
				}
			}
			(),
			Symbian : u.indexOf('Symbian') > -1,
			ucSB : u.indexOf('Firefox/1.') > -1
		};
	}
	()
}

到这里就完美了,三水点靠木小编专门从电影网站扒的代码。

Javascript 相关文章推荐
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
微信小程序实现左右列表联动
May 19 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 Javascript
JS实现百度搜索框
Feb 25 Javascript
vue引用外部JS的两种种方法
Jan 28 #Javascript
Java Varargs 可变参数用法详解
Jan 28 #Javascript
关于引入vue.js 文件的知识点总结
Jan 28 #Javascript
JS简单表单验证功能完整示例
Jan 26 #Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 #Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 #Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 #Javascript
You might like
php cookies中删除的一般赋值方法
2011/05/07 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
详解jQuery选择器
2016/12/21 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
使用Python写CUDA程序的方法
2017/03/27 Python
python如何生成各种随机分布图
2018/08/27 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
网络方面基础面试题
2012/11/16 面试题
销售主管的自我评价分享
2014/01/03 职场文书
服务之星获奖感言
2014/01/21 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
国培教师自我鉴定
2014/02/12 职场文书
优秀经理获奖感言
2014/03/04 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
夫妻吵架保证书
2015/05/08 职场文书
学历证明范文
2015/06/16 职场文书
Python中的 enumerate和zip详情
2022/05/30 Python