用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 相关文章推荐
JavaScript编写推箱子游戏
Jul 07 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 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获取当前日期和时间及格式化方法参数
2015/05/11 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
浅析js封装和作用域
2013/07/09 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
tensorflow训练中出现nan问题的解决
2018/02/10 Python
django 多数据库配置教程
2018/05/30 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
工程监理应届生求职信
2013/11/09 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
影子教师研修方案
2014/06/14 职场文书
导游词400字
2015/02/13 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python