zoukankan      html  css  js  c++  java
  • 手机端和PC端分别加载不同的js文件

    分手机端和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的需求完美解决了。 

  • 相关阅读:
    JSON 序列化类 南京酷得软件
    哈哈哈哈哈哈 找回记忆
    Presto
    (转)在Total Commander下使用SVN
    在ubuntu12.04,64位中安装lnmp一键包mysql的问题
    阿里云服务器上搭建php环境+redis
    在ubuntu12.04,64位中安装nginx+php+redis+mysql
    Redis篇:单线程I/O模型
    工具篇:apachehttpClient 和 jdk11HttpClient的使用
    技能篇:关于缓存数据的一致性探讨
  • 原文地址:https://www.cnblogs.com/ghfjj/p/8520652.html
Copyright © 2011-2022 走看看