HTML怎么判断浏览器的呢?

HTML怎么判断浏览器的呢?,第1张

HTML代码中,在编写网页代码时,各种浏览器的兼容性是个必须考虑的问题,有些时候无法找到适合所有浏览器的写法,就只能写根据浏览器种类区别的代码,这时就要用到判断代码了。在HTML代码中,区别各种浏览器的代码如下,以ie6为例

<!--[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]-->

以上这些代码写法都是针对ie各版本浏览器的,在其他浏览器中这些代码都会被解释为Html注释而直接无视掉。

<body>

<!--[if IE 6]>

<div>

IE6中才可以看到

</div>

<![endif]-->

<div>

其他

</div>

</body>

所以要想些针对firefox之类的非ie浏览器,需要这么写:<!--[if !IE]><!-->除IE外都可识别<!--<![endif]-->

html中区分ie各版本的方法为IE有条件注释,不过这种方式只支持到IE9(包括IE9),在IE10之后移除了该特性;不建议使用;

css中判断IE各版本,只能通过css hack方式,针对浏览器的怪癖行为来区分;不建议使用;

通过js处理浏览器的用户代理userAgent字符串来解析出浏览器的版本,虽然这种方式也不建议使用,但是目前能解析出浏览器类型及版本最好的办法了

js方法

判断浏览器名称和版本

目前只能判断:ie/firefox/chrome/opera/safari

2012年5月16日23:47:08

浏览器内核UA:UA

浏览器内核名称:NV.name

浏览器内核版本:NV.version

浏览器外壳名称:NV.shell

var NV = {}

var UA = navigator.userAgent.toLowerCase()

try

{

NV.name=!-[1,]?'ie':

(UA.indexOf("firefox")>0)?'firefox':

(UA.indexOf("chrome")>0)?'chrome':

window.opera?'opera':

window.openDatabase?'safari':

'unkonw'

}catch(e){}

try

{

NV.version=(NV.name=='ie')?UA.match(/msie ([\d.]+)/)[1]:

(NV.name=='firefox')?UA.match(/firefox\/([\d.]+)/)[1]:

(NV.name=='chrome')?UA.match(/chrome\/([\d.]+)/)[1]:

(NV.name=='opera')?UA.match(/opera.([\d.]+)/)[1]:

(NV.name=='safari')?UA.match(/version\/([\d.]+)/)[1]:

'0'

}catch(e){}

try

{

NV.shell=(UA.indexOf('360ee')>-1)?'360极速浏览器':

(UA.indexOf('360se')>-1)?'360安全浏览器':

(UA.indexOf('se')>-1)?'搜狗浏览器':

(UA.indexOf('aoyou')>-1)?'遨游浏览器':

(UA.indexOf('theworld')>-1)?'世界之窗浏览器':

(UA.indexOf('worldchrome')>-1)?'世界之窗极速浏览器':

(UA.indexOf('greenbrowser')>-1)?'绿色浏览器':

(UA.indexOf('qqbrowser')>-1)?'QQ浏览器':

(UA.indexOf('baidu')>-1)?'百度浏览器':

'未知或无壳'

}catch(e){}

alert('浏览器UA='+UA+

'\n\n浏览器名称='+NV.name+

'\n\n浏览器版本='+parseInt(NV.version)+

'\n\n浏览器外壳='+NV.shell)

})

2.jQuery插件

(function($)

{

/*

判断浏览器名称和版本

目前只能判断:ie/firefox/chrome/opera/safari

2012年5月16日23:47:08

浏览器内核UA:$.NV('ua')或$.NV('UA')

浏览器内核名称:$.NV('name')或$.NV()

浏览器内核版本:$.NV('version')

浏览器外壳名称:$.NV('shell')

*/

$.extend(

{

NV:function(name)

{

var NV = {}

var UA = navigator.userAgent.toLowerCase()

try

{

NV.name=!-[1,]?'ie':

(UA.indexOf("firefox")>0)?'firefox':

(UA.indexOf("chrome")>0)?'chrome':

window.opera?'opera':

window.openDatabase?'safari':

'unkonw'

}catch(e){}

try

{

NV.version=(NV.name=='ie')?UA.match(/msie ([\d.]+)/)[1]:

(NV.name=='firefox')?UA.match(/firefox\/([\d.]+)/)[1]:

(NV.name=='chrome')?UA.match(/chrome\/([\d.]+)/)[1]:

(NV.name=='opera')?UA.match(/opera.([\d.]+)/)[1]:

(NV.name=='safari')?UA.match(/version\/([\d.]+)/)[1]:

'0'

}catch(e){}

try

{

NV.shell=(UA.indexOf('360ee')>-1)?'360极速浏览器':

(UA.indexOf('360se')>-1)?'360安全浏览器':

(UA.indexOf('se')>-1)?'搜狗浏览器':

(UA.indexOf('aoyou')>-1)?'遨游浏览器':

(UA.indexOf('theworld')>-1)?'世界之窗浏览器':

(UA.indexOf('worldchrome')>-1)?'世界之窗极速浏览器':

(UA.indexOf('greenbrowser')>-1)?'绿色浏览器':

(UA.indexOf('qqbrowser')>-1)?'QQ浏览器':

(UA.indexOf('baidu')>-1)?'百度浏览器':

'未知或无壳'

}catch(e){}

switch(name)

{

case 'ua':

case 'UA':br=UAbreak

case 'name':br=NV.namebreak

case 'version':br=NV.versionbreak

case 'shell':br=NV.shellbreak

default:br=NV.name

}

return br

}

})

})(jQuery)

$(function()

{

alert('浏览器UA='+$.NV('UA')+

'\n\n浏览器名称='+$.NV('name')+

'\n\n浏览器版本='+parseInt($.NV('version'))+

'\n\n浏览器外壳='+$.NV('shell'))

})


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/7011899.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-31
下一篇 2023-03-31

发表评论

登录后才能评论

评论列表(0条)

保存