欢迎来到元素模板ys720.com,本站提供专业的织梦模板PBOOTCMS模板网站模板网站修改/网站仿站
当前位置:主页 > 程序教程 > 其他教程 >
其他教程

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

(元素模板) / 2017-12-19 18:43

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

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

第一种方法(简单型):

<script type="text/javascript">  
// 根据屏幕尺寸  
if (screen && screen.width > 480) {  
document.write('<script type="text/javascript" charset="utf-8" src="123.js"><\/script>');  
}  
  
// userAgent判断  
if( /Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)){  
document.write('<script type="text/javascript" charset="utf-8" src="123.js"><\/script>');  
}  
</script>  

 第二种方法(已测试通过,项目真实在用):

<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>  

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

Copyright @ 2013-2021 元素模板 www.ys720.com All Rights Reserved. 版权所有 元素模板 www.ys720.com