如何限制电脑PC端访问Web页面,只能手机端才能访问?



 为了防止做的H5应用的安全,我们会想如何限制电脑PC端访问H5页面,只能手机端才能访问呢?R3i思考者日记网-束洋洋个人博客

其实我们只要用JS判断用户所使用的浏览器以及操作系统等信息就可以了。R3i思考者日记网-束洋洋个人博客

yidongkaifa.jpgR3i思考者日记网-束洋洋个人博客

如何限制电脑PC端访问Web页面,只能手机端才能访问?

好了,进入主题,看下面的代码:R3i思考者日记网-束洋洋个人博客

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 = "http://www.shuyangyang.com.cn/";  
    }  
}

 R3i思考者日记网-束洋洋个人博客

 R3i思考者日记网-束洋洋个人博客

 R3i思考者日记网-束洋洋个人博客

看实际运行效果:R3i思考者日记网-束洋洋个人博客

3882656421398236.jpgR3i思考者日记网-束洋洋个人博客

 R3i思考者日记网-束洋洋个人博客

这是在手机浏览器上访问的,而我用pc端无论如何都访问不了,自动给我跳转到本站首页了。R3i思考者日记网-束洋洋个人博客

 R3i思考者日记网-束洋洋个人博客

全部代码:R3i思考者日记网-束洋洋个人博客

<!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>  
</head>  
  
<body>  
<h1>你只能在手机浏览器上看到我</h1>  
</body>  
<script type="text/javascript">  
    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 = "http://www.shuyangyang.com.cn/";  
        }  
    }  
</script>  
</html>

 R3i思考者日记网-束洋洋个人博客

 R3i思考者日记网-束洋洋个人博客

知识点:

navigator是在JavaScript中的一个独立的对象,他用于提供用户所使用的浏览器以及操作系统等信息,以navigator对象属性的形式来提供。R3i思考者日记网-束洋洋个人博客

navigator介绍

appCodeName javaScript 1.0 介绍:与浏览器相关的内部代码名R3i思考者日记网-束洋洋个人博客

appMinorVersion IE4及其后续的版本   介绍:辅版本号(通常应用于浏览器的补丁或服务包)R3i思考者日记网-束洋洋个人博客

appName javaScript 1.0 介绍:浏览器的正式名称R3i思考者日记网-束洋洋个人博客

appVersion javaScript 1.0 介绍:览器的版本号R3i思考者日记网-束洋洋个人博客

cookieEnabled IE4和NS6及其后续版本介绍:返回用户浏览器是否启用了cookieR3i思考者日记网-束洋洋个人博客

cpuClass IE4及其后续的版本介绍:回用户计算机的cpu的型号,通常intel芯片返回"x86"R3i思考者日记网-束洋洋个人博客

language NS4及其后续的版本介绍:览器支持的语言R3i思考者日记网-束洋洋个人博客

mimeType javaScript 1.1 介绍:浏览器支持的所有MIME类型的数组R3i思考者日记网-束洋洋个人博客

onLine JScript 1.0介绍:回浏览器是否处于在线模式(IE4以上版本)R3i思考者日记网-束洋洋个人博客

opsProfile N/A 介绍:未定义R3i思考者日记网-束洋洋个人博客

oscpu NS6 及其后续的版本介绍:浏览器正在运行的操作系统,其中可能有CPU的信息R3i思考者日记网-束洋洋个人博客

platform javaScript 1.2R3i思考者日记网-束洋洋个人博客

介绍:浏览器正在运行的操作系统平台,包括Win16(windows3.x),R3i思考者日记网-束洋洋个人博客

Win32(windows98,Me,NT,2000,xp),Mac68K(Macintosh 680x0)和MacPPC(Macintosh PowerPC)R3i思考者日记网-束洋洋个人博客

plugins javaScript 1.1 介绍:安装在浏览器上的所有插件的数组R3i思考者日记网-束洋洋个人博客

product NS6 及其后续的版本介绍:浏览器的产品名R3i思考者日记网-束洋洋个人博客

productSub NS6 及其后续的版本介绍:关于浏览器更多信息R3i思考者日记网-束洋洋个人博客

securityPolicy NS64及其后续的版本介绍:浏览器支持的加密类型R3i思考者日记网-束洋洋个人博客

systemLanguage IE4及其后续的版本介绍:用户操作系统支持的默认语言R3i思考者日记网-束洋洋个人博客

userAgent javaScript 1.0介绍:包含以下属性中所有或一部分的字符串:appCodeName,appName,appVersion,language,platformR3i思考者日记网-束洋洋个人博客

userLanguage IE4及其后续的版本介绍:用户在自己的操作系统上设置的语言R3i思考者日记网-束洋洋个人博客

userProfile NS6 及其后续的版本介绍:返回一个UserProfile对象,它存储用户的个人信息R3i思考者日记网-束洋洋个人博客

vender NS6 及其后续的版本介绍:浏览器厂商名称R3i思考者日记网-束洋洋个人博客

vendorSub NS6 及其后续的版本介绍:关于浏览器厂商更多的信息R3i思考者日记网-束洋洋个人博客

实例:判断客户端是否开启cookieR3i思考者日记网-束洋洋个人博客

if(navigator.cookieEnabled){

alert("已开启cookie");//符合条件继续执行自己的逻辑代码就可以了

}else{

alert("没有开启cookie");

}

 R3i思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈