手機端和PC端分別加載不同的js文件


分手機端和PC端其實方法很多,我們在響應式設計、響應式網站建設中經常碰到此類需求。下面說說我們在項目中遇到的需求:

手機端和PC端分別加載不同的js客服代碼(注意:是要在PC和手機端分別加載不同的js文件)

第一種方法(簡單型):

  1. <script type="text/javascript">  
  2. // 根據屏幕尺寸  
  3. if (screen && screen.width > 480) {  
  4. document.write('<script type="text/javascript" charset="utf-8" src="123.js"><\/script>');  
  5. }  
  6.   
  7. // userAgent判斷  
  8. if( /Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)){  
  9. document.write('<script type="text/javascript" charset="utf-8" src="123.js"><\/script>');  
  10. }  
  11. </script>  

 第二種方法(已測試通過,項目真實在用):

 
  1. <script type="text/javascript">  
  2. function browserRedirect() {  
  3. var sUserAgent = navigator.userAgent.toLowerCase();  
  4. var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";  
  5. var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";  
  6. var bIsMidp = sUserAgent.match(/midp/i) == "midp";  
  7. var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";  
  8. var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";  
  9. var bIsAndroid = sUserAgent.match(/android/i) == "android";  
  10. var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";  
  11. var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";  
  12. // document.writeln("您的瀏覽設備為:");  
  13. if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {  
  14.   
  15. // alert("手機瀏覽!");  
  16.   
  17. document.write('<script type="text/javascript" charset="utf-8" src="123.js"><\/script>');  
  18. else {  
  19.   
  20. // alert("PC瀏覽!");  
  21. document.write('<script type="text/javascript" charset="utf-8" src="123.js"><\/script>');  
  22. }  
  23. }  
  24. browserRedirect();  
  25. </script>  

這樣子我們直接在PC端和手機端分別輸出不同的js。所以,我們在手機端和PC端分別加載不同的js的需求完美解決了。 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM