用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 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
jQuery 注意事项 与原因分析
Apr 24 Javascript
javascript面向对象之Javascript 继承
May 04 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
详解vue express启动数据服务
Jul 05 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 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横向重复区域显示二法
2008/09/25 PHP
php 分库分表hash算法
2009/11/12 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
Python字符串转换成浮点数函数分享
2015/07/24 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
python Tornado框架的使用示例
2020/10/19 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
介绍一下Make? 为什么使用make
2013/12/08 面试题
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
厨师岗位职责
2013/11/12 职场文书
超市业务员岗位职责
2013/12/05 职场文书
中队活动总结
2014/08/27 职场文书
灵山大佛导游词
2015/02/04 职场文书
春节晚会开场白
2015/05/29 职场文书
导游词之昭君岛
2020/01/17 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python