手機端和PC端分別載入不同的js檔案

標籤：black   ==   3.4   key   red   建設   text   write   str   

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

手機端和PC端分別載入不同的js檔案