一号优惠经验分享网
51福利网的各种薅羊毛福利经验笔记

手机端和PC端分别加载不同的js文件

分手机端和PC端其实方法很多,我们在响应式设计、响应式网站建设中经常碰到此类需求。下面说说我们在项目中遇到的需求:

手机端和PC端分别加载不同的js客服代码(注意:是要在PC和手机端分别加载不同的js文件)

51福利网

这样子我们直接在PC端和手机端分别输出不同的js。所以,我们在手机端和PC端分别加载不同的js的需求完美解决了。

<script type="text/javascript">  
function browserRedirect() {  
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";  
// document.writeln("您的浏览设备为:");  
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {  
  
// alert("手机浏览!");  
  
document.write('<script type="text/javascript" charset="utf-8" src="123.js"><\/script>');  
} else {  
  
// alert("PC浏览!");  
document.write('<script type="text/javascript" charset="utf-8" src="123.js"><\/script>');  
}  
}  
browserRedirect();  
</script>  

通过检测用户代理(User Agent)来判断设备类型,并根据设备类型加载不同的JavaScript文件。

  1. 冗余判断:多次使用match==进行判断显得有些冗余,可以使用正则表达式的test方法来进行简化。
  2. 代码清晰度:使用清晰的变量名可以提高代码的可读性。

以下是改进后的代码:

<script type="text/javascript">  
function browserRedirect() {  
  var sUserAgent = navigator.userAgent.toLowerCase();  
  var isMobileDevice = /ipad|iphone os|midp|ucweb|android|windows ce|windows mobile/i.test(sUserAgent);  
  
  if (isMobileDevice) {  
    document.write('<script type="text/javascript" charset="utf-8" src="123.js"><\/script>');  
  } else {  
    document.write('<script type="text/javascript" charset="utf-8" src="123.js"><\/script>');  
  }  
}  
  
browserRedirect();  
</script>

这段代码更加简洁和清晰。

一号优惠 · 51福利网薅羊毛福利具有时效性,如已失效,请留言
文章名称:《手机端和PC端分别加载不同的js文件》-一号优惠 · 51福利网
免责申明:本站所有活动信息均来自网络,如有失效、违规、不实或侵权,请联系我们删除。谢谢

评论 抢沙发

一号优惠经验分享网最新最全薅羊毛,现金红包线报网

一号优惠经验分享网提供每日最新内部优惠,薅羊毛活动,现金红包领取,免费福利和网赚福利手机赚钱线报,打造中国最受欢迎的网赚信息发布平台!51福利网

51联盟线报群赚钱·合作·帮助

登录

找回密码

注册