JS 判断是否是手机端并跳转操作

JS 判断运行当前脚本的应用程序是否为手机端或者一些其他信息,在我的工作中遇到的不是十分频繁,被我的同事一问就给问住了,所以把之前找到的一些知识点整理出来,供大家参考,若哪里不对欢迎指出,我会及时的更改 (#^.^#)。

 window.navigator

 先从这个属性入手:window.navigator 返回一个navigator对象的引用,可以用它来查询一些关于运行当前脚本的应用程序的相关信息。

常用属性和方法:(想知道详细属性和方法的请点MDN)

Navigator 对象属性 

属性说明
appCodeName返回当前浏览器的内部“代码”名称,该名称可能是不"正确"的.
appName返回当前浏览器的正式名称,该名称可能是不"正确"的.
appVersion返回当前浏览器的版本号,该值可能是不"正确"的.
cookieEnabled返回一个布尔值,表明当前浏览器是否启用了cookies.
platform返回一个字符串,表明当前所使用的系统平台类型.
userAgent返回当前浏览器的user agent字符串.

Navigator 对象方法

方法描述
javaEnabled()表明当前浏览器是否启用了对Java的支持.
vibrate()如果设备支持震动(手机或其他),则触发设备震动.
registerContentHandler允许网站将自己注册成为一个给定MIME类型的内容的处理程序.

eg: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="test"></div>
<script>
txt = "<p>浏览器代号: " navigator.appCodeName "</p>";
txt = "<p>浏览器名称: " navigator.appName "</p>";
txt = "<p>浏览器版本: " navigator.appVersion "</p>";
txt = "<p>启用Cookies: " navigator.cookieEnabled "</p>";
txt = "<p>硬件平台: " navigator.platform "</p>";
txt = "<p>用户代理: " navigator.userAgent "</p>";
txt = "<p>用户代理语言: " navigator.systemLanguage "</p>";
document.getElementById("test").innerHTML=txt;
</script>
</body>
</html>

常用跳转代码 

<script type="text/javascript"> 
// borwserRedirect
(function browserRedirect(){
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad';
var bIsIphone = sUserAgent.match(/iphone os/i) == 'iphone os';
var bIsMidp = sUserAgent.match(/midp/i) == 'midp';
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4';
var bIsUc = sUserAgent.match(/ucweb/i) == 'web';
var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce';
var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile';
var bIsAndroid = sUserAgent.match(/android/i) == 'android';
if(bIsIpad || bIsIphone || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM || bIsAndroid ){
window.location.href = '跳转的移动端网址';
}
})();
</script>
<script type="text/javascript"> 
<!-- 
//平台、设备和操作系统 
var system = { 
win: false, 
mac: false, 
xll: false, 
ipad:false
}; 
//检测平台 
var p = navigator.platform; 
system.win = p.indexOf("Win") == 0; 
system.mac = p.indexOf("Mac") == 0; 
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 
system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false; 
//跳转语句,如果是手机访问就自动跳转到wap.baidu.com页面 
if (system.win || system.mac || system.xll||system.ipad) { 

     //  something.... 

} else { 
window.location.href = "PC端网址"; 
--> 
</script>

腾讯跳转 

<script type="text/javascript">
if(window.location.toString().indexOf('pref=padindex') != -1){
}else{
if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){ 
if(window.location.href.indexOf("?mobile")<0){
try{
if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
window.location.href="手机端网址";
}else if(/iPad/i.test(navigator.userAgent)){
//window.location.href="pad网址"
}else{
window.location.href="PC端网址"
}
}catch(e){}
}
}
}
</script>
<script type="text/javascript"> 
<!-- 
//平台、设备和操作系统 
var system = { 
win: false, 
mac: false, 
xll: false, 
ipad:false
}; 
//检测平台 
var p = navigator.platform; 
system.win = p.indexOf("Win") == 0; 
system.mac = p.indexOf("Mac") == 0; 
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 
system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false; 
//跳转语句,如果是手机访问就自动跳转到手机端网页
if (system.win || system.mac || system.xll||system.ipad) { 
} else { 
window.location.href = "PC网页"; 
--> 
</script>
JS 判断浏览器客户端类型(ipad,iphone,android)  
<script type="text/javascript">  
var bForcepc = fGetQuery("dv") == "pc"; 
function fBrowserRedirect(){ 
var sUserAgent = navigator.userAgent.toLowerCase(); 
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; 
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; 
var bIsMidp = sUserAgent.match(/midp/i) == "midp"; 
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; 
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; 
var bIsAndroid = sUserAgent.match(/android/i) == "android"; 
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; 
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; 
if(bIsIpad){ 
var sUrl = location.href;  
if(!bForcepc){ 
window.location.href = "手机网址"; 
if(bIsIphoneOs || bIsAndroid){ 
var sUrl = location.href;  
if(!bForcepc){ 
window.location.href = "手机网址"; 
if(bIsMidp||bIsUc7||bIsUc||bIsCE||bIsWM){ 
var sUrl = location.href;  
if(!bForcepc){ 
window.location.href = ""; 
function fGetQuery(name){//获取参数值 
var sUrl = window.location.search.substr(1); 
var r = sUrl.match(new RegExp("(^|&)" name "=([^&]*)(&|$)")); 
return (r == null ? null : (r[2])); 
function fShowVerBlock(){  
if(bForcepc){ 
document.getElementByIdx_x("dv_block").style.display = "block"; 
else{ 
document.getElementByIdx_x("ad_block").style.display = "block"; 
fBrowserRedirect(); 
</script>

测试是什么终端 

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;] ;( U;)? CPU. Mac OS X/); //ios终端
alert('是否是Android:' isAndroid);
alert('是否是iOS:' isiOS); 

参考网址 

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/navigator 

http://www.jb51.net/article/104661.htm

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362798.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用拦截器分析Java EE应用程序的性能下降/提高

在开发具有某些性能要求的Java EE应用程序时&#xff0c;必须在每个发行版之前验证是否满足这些要求。 您可能会想到&#xff0c;哈德森的一项工作每天晚上在某些特定的硬件平台上执行一系列测试测量。 您可以检查已实现的时间并将它们与给定的要求进行比较。 如果测量值与要求…

子组件上下结构布局自适应父组件宽度高度

1、父级页面 <template><div><div class"parentDiv"><!-- gys-org-navigator 在这里是全局注册组件 --><gys-org-navigator ref"orgNavigator" :org-tree"orgTree" :org-id"orgId" :org-type"orgType…

狸猫换太子:动态替换WinCE的原生驱动!

////TITLE:// 狸猫换太子&#xff1a;动态替换WinCE的原生驱动&#xff01;//AUTHOR:// norains//DATE:// Friday 23-April-2010//Environment:// Windows CE 5.0 TCC7901// 大家应该都知道&#xff0c;WinCE系统的驱动是可以非常方便地动态加载和卸载的&#xff…

mysql批量更新

由于mysql没有top函数&#xff0c;limit也不支持子查询&#xff0c;所以批量修改、查询就显得比较麻烦&#xff0c; 但是我还是想到了一个办法&#xff1b; 即创建一个临时表&#xff0c;用于批量操作&#xff1b; 详细如下&#xff1a; 1 create TEMPORARY TABLE test(cardId …

将Spring 3.x和Hibernate 3.x升级到Spring Platform 1.0.1(Spring + hibernate 4.x)

我最近自愿将我们的最新项目升级到最新版本的Spring Platform。 Spring Platform为您提供的是整个Spring框架库集中的依赖项和插件管理。 由于我们落后了一点&#xff0c;升级确实增加了一些乐趣。 这是我遇到的事情&#xff1a; Maven&#xff1a; 我们的pom文件仍在引用&am…

可缺省的CSS布局——张鑫旭

一、技术不难、意识很难 有些东西的东西的实现&#xff0c;难的不是原料、技术&#xff1b;而是想不到&#xff0c;或者说意识不到。 例如下面这个简单而又神奇的魔术&#xff1a; 是吧。搞通了&#xff0c;才发现&#xff0c;哦~原来这么回事&#xff0c;很简单的嘛&#x…

杭电1061题

//求N^N的个位数//思路&#xff1a;只计算个位数的乘积&#xff0c;个位数最后形成一个循环#include <iostream>#include <string>#include <vector>using namespace std;int main(){ int num; cin>>num; for(int i0;i<num;i) { vector<int>…

使用Spring AOP,自定义注释和反射为您的应用审核基础架构

下一篇文章将演示如何使用Spring AOP和注释编写简单的审计。 审核机制将是干净&#xff0c;高效且易于维护的&#xff08;和Kewwl&#xff01;&#xff09;。 我将在用户管理系统上演示我的示例&#xff08;假设您对反射和AOP具有一般知识&#xff09;。 我们从简单的数据库表…

Git命令总结(附详解)

1.进入某文件目录后&#xff1a;git init 是该目录成为git仓库 2.将改动存入暂存区&#xff1a;git add filename 3.将文件提交到仓库&#xff1a;git commit -m ‘该修改的注释’ 4.查看修改内容以及是否提交&#xff1a;git status 5.查看文件修改内容&#xff1a;git diff f…

JSON 使用 教程

JSONP 教程 本章节我们将向大家介绍 JSONP 的知识。 Jsonp(JSON with Padding) 是 json 的一种"使用模式"&#xff0c;可以让网页从别的域名&#xff08;网站&#xff09;那获取资料&#xff0c;即跨域读取数据。 为什么我们从不同的域&#xff08;网站&#xff09;访…

SQL Cookbook:二、查询结果排序(1)以指定的次序返回查询结果

问题 显示部门10中员工的名字、职位和工资&#xff0c;并按照工资的升序排列。结果集如下所示&#xff1a; ENAME JOBSAL---------- -------------------MILLER CLERK 1300CLARK MANAGER 2450KING PRESIDENT 5000解决方案 使用ORDER BY子句&#xff1a; select ename,job,sal…

经过几天的Scala回归Java的10个最烦人的事情

因此&#xff0c;我正在尝试使用Scala&#xff0c;因为我想编写一个解析器&#xff0c;而Scala Parsers API似乎非常合适。 毕竟&#xff0c;我可以在Scala中实现解析器并将其包装在Java接口后面&#xff0c;因此除了附加的运行时依赖关系之外&#xff0c;不应该存在任何互操作…

LeetCode 198. 打家劫舍(House Robber) 5

198. 打家劫舍198. House Robber 题目描述 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自…

SpringBoot 参数符号转义,用这个包下面的类

SpringBoot 参数符号转义&#xff0c;用这个包下面的类 org.apache.commons.text.StringEscapeUtils String team StringEscapeUtils.unescapeHtml4(biUserOrganization.getTeam()); 2017/12/01 | Java | admin| 暂无评论 | 8717 views如题所示&#xff0c;之前一直使用c…

irrlicht v1.6 例程18 Splitscreen

/** Example 018 Splitscreen, U( a# q, ( S f1 ]( p作者&#xff1a;Max Winkel." 9 ?( W; K V1 x8 \译&#xff1a;小时候可靓了&#xff08;履霜坚冰&#xff09;2 m! C! N# J2 i6 a2 Z! Q0 U2 D4 U: U% J1 E5 N! a0 L4 q& x这个例程中我们将学习怎么使用irrlicht…

检查Red Hat JBoss BRMS部署架构的规则和事件(第二部分)

&#xff08;文章来宾与北美红帽公司高级中间件顾问约翰赫洛克 &#xff08; John Hurlocker&#xff09;合着&#xff09; 在本周的技巧中&#xff0c;我们将放慢速度&#xff0c;并仔细研究可能的Red Hat JBoss BRMS部署体系结构。 当我们谈论部署架构时&#xff0c;我们指…

博客园皮肤-我的博客园皮肤设置教程

一、前言 好的博客皮肤能吸引更多的访问量&#xff0c;也可以使博主更有动力更新博客。今天看到一个博主的博客非常漂亮&#xff0c;突发奇想也打扮了一下自己的博客&#xff0c;虽然差距还有不小&#xff0c;也记录一下操作方法供大家参考。 二、操作 1.左上角“fork me on gi…

设计撑百万并发的数据库架构

设计撑百万并发的数据库架构 https://www.toutiao.com/a6742034135486824973/ 前言 作为一个全球人数最多的国家&#xff0c;一个再怎么凄惨的行业&#xff0c;都能找出很多的人为之付出。而在这个互联网的时代&#xff0c;IT公司绝对比牛毛还多很多。但是大多数都是创业公司&a…

Spring MVC集成测试:断言给定的模型属性有全局错误

为了使用Bean验证报告Spring MVC中的全局错误&#xff0c;我们可以创建一个自定义的类级别约束注释。 全局错误与已验证Bean中的任何特定字段都不相关。 在本文中&#xff0c;我将展示如何使用Spring Test编写测试&#xff0c;以验证给定的model属性是否存在全局验证错误。 自…

Intent 的用法

1、用Context指定 Intent inew Intent(context,Receivered.class); context.startActivity(i);2、通过配置指定 <activity android:name"com.neusoft.android.Demo.photo.TestActivity"> <intent-filter> <action android:n…