思考一个问题,如何让一个二维码在用不同的设备扫描时进入不一样的地址呢(听起来像不像隔空取物)?前端js可以实现吗?答案是ok的,目前找到一种办法,分享一下。
核心就是利用userAgent来判断设备,那什么是userAgent?简单的说,User Agent就是用来识别浏览器名称、版本、引擎以及操作系统等信息的内容。于是乎,User Agent的判断就成为识别浏览器的关键,不仅仅如此,移动互联网开发势头迅猛,那么通过User Agent判断桌面端设备或移动设备就变的很为重要。
首先写一个空页面里面只写一段逻辑代码,就是判断设备跳不同的地址(注:这只是一个小例子,里面只判断了移动设备是安卓还是ios)
if (/android/i.test(navigator.userAgent)){ // 这里是安卓的 } if (/ipad|iphone|mac/i.test(navigator.userAgent)){ // 这里是ios的 }
还有很多的介绍这种的实现方法,更全面更严谨,例如:
<script type="text/javascript"> var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 trident: u.indexOf(‘Trident‘) > -1, //IE内核 presto: u.indexOf(‘Presto‘) > -1, //opera内核 webKit: u.indexOf(‘AppleWebKit‘) > -1, //苹果、谷歌内核 gecko: u.indexOf(‘Gecko‘) > -1 && u.indexOf(‘KHTML‘) == -1, //火狐内核 mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 android: u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1, //android终端或uc浏览器 iPhone: u.indexOf(‘iPhone‘) > -1 , //是否为iPhone或者QQHD浏览器 iPad: u.indexOf(‘iPad‘) > -1, //是否iPad webApp: u.indexOf(‘Safari‘) == -1 //是否web应该程序,没有头部与底部 }; }(), language:(navigator.browserLanguage || navigator.language).toLowerCase() } document.writeln("语言版本: "+browser.language); document.writeln(" 是否为移动终端: "+browser.versions.mobile); document.writeln(" ios终端: "+browser.versions.ios); document.writeln(" android终端: "+browser.versions.android); document.writeln(" 是否为iPhone: "+browser.versions.iPhone); document.writeln(" 是否iPad: "+browser.versions.iPad); document.writeln(navigator.userAgent); </script>
判断到这里应该简单了吧,跳走就简单了location.replace(‘地址‘)就好了!
简单吧,可是。。。凡事都有可是啊,这个做法是有漏洞的,所有前端能够做到的东西,用户都可以拿得到代码,这就会产生风险,就会被‘玩儿’;怎么办呢?
现在就只能有两种方式解决了,一是直接分开解决所有问题;但是就是很多的时候就是需要这个功能,那就只能服务端来做了。哎。。。。
谁有更好的解决方法吗?求教啊。。。。
时间: 2024-10-27 06:47:39