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

  • 相关阅读:
    字典序全排列算法研究
    【转】 SVM算法入门
    孤儿进程与僵尸进程[总结]
    Thymeleaf——入门与基本概述
    Springboot+vue项目学习整合(-)vue的安装
    WebService技术详解 (一)
    什么是NOSQL(SQL和NOSQL对比图文详解)
    数据库优化和扩容(图文详解)
    Spring Cloud原理详解(附案例+五大核心组件大量手绘图)
    spring STS download URL
  • 原文地址:https://www.cnblogs.com/ghfjj/p/8520652.html
Copyright © 2020-2023  润新知