iT邦幫忙

10

[JavaScript][HTML][CSS][PHP][JSP] 判斷使用者瀏覽器版本之方法

divaka 2012-07-15 00:16:1847961 瀏覽

本篇文章紀錄判斷瀏覽器版本的方式與語法
希望對各位有幫助


圖片來源:http://www.spikednation.com/content/internet-explorer-sucksgif
1. JavaScript 語法

<script type="text/javascript">
    var isIE = navigator.userAgent.search("MSIE") > -1;
    var isIE7 = navigator.userAgent.search("MSIE 7") > -1;
    var isFirefox = navigator.userAgent.search("Firefox") > -1;
    var isOpera = navigator.userAgent.search("Opera") > -1;
    var isSafari = navigator.userAgent.search("Safari") > -1;//Google瀏覽器是用這核心
    if (isIE7) {
        alert('isIE7');
    }
    if (isIE) {
        alert('isIE');
    }
    if (isFirefox) {
        alert('isFirefox');
    }
    if (isOpera) {
        alert('isOpera');
    }
    if (isSafari) {
        alert('isSafari or Chrome');
    }
</script>

另外,我有將 JS 偵測的語法包成一個 Function 來使用,如下:
這個連結可以觀察其效果:http://jsfiddle.net/divaka/SMvLP/1/

function detectBrowser(){
    var isIE = navigator.userAgent.search("MSIE") > -1;
    var isIE7 = navigator.userAgent.search("MSIE 7") > -1;
    var isFirefox = navigator.userAgent.search("Firefox") > -1;
    var isOpera = navigator.userAgent.search("Opera") > -1;
    var isSafari = navigator.userAgent.search("Safari") > -1;//Google瀏覽器是用這核心
    
    if (isIE7) {
        browser = 'IE7';
    }
    if (isIE) {
        browser = 'IE';
    }
    if (isFirefox) {
        browser = 'Firefox';
    }
    if (isOpera) {
        browser = 'Opera';
    }
    if (isSafari) {
        browser = 'Safari/Chrome';
    }
    return browser;
}

// ===== 根據瀏覽器動態改變元素大小 ====== //
var browser = detectBrowser();
alert(browser);

2. CSS語法

.classname{
 
background:blue; /*Firefox等非IE瀏覽器背景變藍色*/
background:red \9; /*IE8 背景變紅色*/
*background:black; /*IE7 背景變黑色*/
_background:orange; /*IE6 背景變橘色*/
 
}

3. HTML 語法

<!-​​-[if IE 6]> 僅IE6可識別 <![endif]–>
<!-​​-[if lte IE 6]> IE6及其以下版本可識別<![endif]–>
<!-​​-[if lt IE 6]> IE6以下版本可識別<![endif]–>
<!-​​-[if gte IE 6]> IE6及其以上版本可識別<![endif]–>
<!-​​-[if gt IE 6]> IE6以上版本可識別<![endif]–>
<!-​​-[if IE]> 所有的IE可識別 <![endif]–>

lte:Less than or equal to,小於或等於的意思。
lt :Less than的簡寫,小於的意思。
gte:Greater than or equal to的簡寫,大於或等於的意思。
gt :Greater than的簡寫,大於的意思。
! :不等於的意思

以下再補充 PHP 與 JSP 的語法

4. PHP 的語法

//偵測瀏覽器
$agent = $_SERVER['HTTP_USER_AGENT'];
if(strpos($agent,"MSIE 8.0"))
  echo "Internet Explorer 8.0";
else if(strpos($agent,"MSIE 7.0"))
  echo "Internet Explorer 7.0";
else if(strpos($agent,"MSIE 6.0"))
  echo "Internet Explorer 6.0";
else if(strpos($agent,"Firefox/3"))
  echo "Firefox 3";
else if(strpos($agent,"Firefox/2"))
  echo "Firefox 2";
else if(strpos($agent,"Chrome"))
  echo "Google Chrome";
else if(strpos($agent,"Safari"))
  echo "Safari";
else if(strpos($agent,"Opera"))
  echo "Opera";
else
  echo $agent;

5. JSP 的語法

<%@ page language="java"%>
<%
String userAgent = request.getHeader("user-agent");
%>


<%out.print ("USER AGENT IS " +userAgent);%>

Note. 以下補充 JSP 可以取得之瀏覽器訊息

request.getHeader(“User-agent”) ; /*取得客戶端瀏覽器的版本號、類型*/
getHeader(String name); /*取得http協議定義的傳送文件頭信息 */
request. getMethod(); /*取得客戶端向服務器端傳送數據的方法有GET、POST、PUT等類型 */
request. getRequestURI(); /*取得發出請求字符串的客戶端地址 */
request. getServletPath(); /*取得客戶端所請求的腳本文件的文件路徑 */
request. getServerName(); /*取得服務器的名字 */
request.getServerPort(); /*取得服務器的端口號 */
request.getRemoteAddr(); /*取得客戶端的IP地址 */
request.getRemoteHost(); /*取得客戶端電腦的名字,若失敗,則返回客戶端電腦的IP地址*/
request.getProtocol(); /* 取得客戶端電腦的 Protocal */
request.getHeaderNames(); /*取得所有request header的名字,結果集是一個Enumeration(枚舉)類的實例 */
request.getHeaders(String name); /*取得指定名字的request */

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
ted99tw
iT邦高手 1 級 ‧ 2012-07-15 08:36:48

推+1筆記

0
tankfinal
iT邦新手 5 級 ‧ 2017-10-13 10:16:57

推推+1

我要留言

立即登入留言