其中jQuery.browser已经提供了根据UserAgent检测的浏览器信息。而jQuery.support 使用特性检测来检查浏览器的功能以及Bug。
和文档一样,首先说明一下,这个模块是很底层的代码,基本不需要在日常开发中使用,但是插件的开发者更需要。因为插件需要兼容各个浏览器。首先看一下 support模块提供了哪些浏览器特性的检测,以下结果是在Chrome 13 Dev下看到的结果。根据浏览器的不同,这里的成员可能会有变化。(PS:再次吐槽IE,大部分属性都是IE比较特别)
- ajax: true。是否支持XMLHttpRequest对象。老版本的IE不支持,必须用ActiveX。 * appendChecked: true。 * boxModel: true。是否根据W3C CSS盒模式渲染。IE6和7的Quirks模式为False。 * changeBubbles: true。change事件是否沿着DOM树冒泡。这是W3C DOM事件模型的要求,但是IE目前为止是False。jQuery模拟了这个冒泡特性。 * checkClone: undefined。在克隆Radio Button或者CheckBox时是否保留选中状态。以前说createFragment缓存的时候提到过,WebKit内核是不保留的。 * checkOn: false。CheckBox在没有指定时是否默认为On。 * cors: true。XMLHttpRequest对象是否带有withCredentials属性。可以执行跨域请求。或者没有这个属性,但是有其他途径可以实现跨域XHR请求的,也是True(比如通过Windows Gadget)。 * cssFloat: true。支持cssFloat的CSS属性。IE是False,它使用了styleFloat。 * deleteExpando: true。 * focusinBubbles: false。 * getSetAttribute: true。 * hrefNormalized: true。对一个a元素调用getAttribute("href")时,是否返回原始指定的URL。IE会返回完整路径。比如对于href="1.html"的链接,IE会得到http://..../1.html。 * htmlSerialize: true。是否可以用innerHTML插入link元素。IE为false。 * inlineBlockNeedsLayout: false。为了让block元素表现inline-block,是否需要为inline并且hasLayout(IE下的概念,大部分布局问题的根源)。IE8以下有问题。 * leadingWhitespace: true。innerHTML属性是否严格按照代码渲染。IE6-8中会去掉前置的空白。(所以使用Markdown写的这篇文章在IE下有格式问题,因为换行不见了) * noCloneChecked: true。1.5.1新属性。检测浏览器是否克隆checked扩展属性。IE为false。 * noCloneEvent: true。拷贝的元素是否会带有事件处理函数(即Event handler是否被拷贝过去)。IE为false。 * opacity: true。是否支持opacity CSS属性(透明度)。IE为false,它使用alpha filter。 * optDisabled: true。已经disabled的select元素中的option元素是否默认为disabled。 * optSelected: true。一个默认被选中的option元素的selected属性是否正常。 * radioValue: true。 * reliableHiddenOffsets: true。在table的cells被设置为display:none的时候,仍然有offsetWidth/Height。即hidden靠不住。只有IE8有这个问题。参见4512号bug * reliableMarginRight: true。div有显式的宽度,但是没有margin-right。此时基于容器计算margin-right不正确。旧版本WebKit有问题。参见3333号bug * scriptEval(): 1.5.1版本前,这是一个属性,而现在变成函数了。检测一个inline的脚本在使用标准的DOM操作函数被添加时是否会自动执行。比如appendChild和createTextNode。IE是false,它使用text来插入脚本。 * shrinkWrapBlocks: false。元素在hasLayout的情况下是否会撑大父节点。只有IE6是true。 * style: true。一个元素的inline的style属性是否可以用DOM属性访问。比如getAttribute("style")。IE是false,它使用cssText属性。 * submitBubbles: true。submit事件是否沿着DOM树冒泡。IE为false,jQuery模拟了这个冒泡过程。 * tbody: true。一个空的table元素是否可以没有tbody元素。根据HTML规范,子元素是可选的。但是IE是false,所以会自动插入一个tbody元素。
jQuery创建了几个元素用来判断浏览器特性。如下:
复制代码 代码如下:
var div = document.createElement("div");
div.setAttribute("className", "t");
div.innerHTML = " <LINK><TABLE><TBODY></TBODY></TABLE><A style="FLOAT: left; TOP: 1px; opacity: .55" href="https://www./a">a</A><INPUT type=checkbox>";
all = div.getElementsByTagName("*");
a = div.getElementsByTagName("a")[0];
var select = document.createElement("select");
opt = select.appendChild(document.createElement("option"));
input = div.getElementsByTagName("input")[0];
其中div元素相当有内涵。包括了空白开头,空Table元素,inline style,opacity等等。除了一行行看代码和注释也没啥其他笔记了:
复制代码 代码如下:
support = {
// IE会把开头的空格去掉,所以nodeType不是3(文本)
leadingWhitespace: (div.firstChild.nodeType === 3),
// IE会自动插入tbody,所以length不同
tbody: !div.getElementsByName("tbody").length,
// IE不允许用这种方式插入link元素
htmlSerialize: !!div.getElementsByTagName("link").length,
// 如果正常获得style的话,这个正则表达式应该会正常通过
style: /top/.test(a.getAttribute("style")),
// href属性应该是原始指定的字符串,IE会修改为http开头的绝对URL
hrefNormalized: (a.getAttribute("href") === "/a"),
// 能得到opacity属性。这里使用了正则表达式,是为了绕过WebKit[5145号bug](http://dev.jquery.com/ticket/5145)
// 但是这应该是一个早期版本的问题。起码在Chrome 13中,不用正则也是对的。
opacity: /^0.55$/.test(a.style.opacity),
// IE使用styleFloat
cssFloat: !!a.style.cssFloat,
// div中的checkbox没有指定值,看默认值是否是on。WebKit是""。所以我的结果是false
checkOn: (input.value === "on"),
// 这个select只有一个option元素,所以渲染时,这个option是默认选中的。此时selected应该是true。
optSelected: opt.selected,
submitBubbles: true,
changeBubbles: true,
focusinBubbles: false,
deleteExpando: true,
noCloneEvent: true,
inlineBlockNeedsLayout: false,
shrinkWrapBlocks: false,
reliableMarginRight: true
};
下面的大部分都是按部就班的测试。其中BoxModel的测试比较有趣:
复制代码 代码如下:
div.innerHTML = ""; // 从头来
div.style.width = div.style.paddingLeft = "1px";
body = document.createElement("body");
body.style.width = 0;
body.style.height = 0;
body.style.border = 0;
body.style.margin = 0; // 全部设置为0
body.appendChild(div);
document.documentElement.insertBefore(body, document.documentElement.firstChild);
support.boxModel = div.offsetWidth === 2;
// 这个时候div嵌套在body下。而body长宽高,边框和margin都是0。所以div的偏移应该就是它自己的paddingLeft+width。如果不对,就说明盒模式不对。
然后值得注意的是事件的冒泡,注释中提到的技术参考文章链接已经失效。请自己搜索"Detecting event support without browser sniffing"
复制代码 代码如下:
// attachEvent是IE的,所以这里实际上只检查了IE,其他浏览器都是前面设置的默认值。
if(div.attachEvent) {
for(i = {
submit: 1,
change: 1
focusin: 1
}) {
eventName = "on" + i;
isSupported = (eventName in div);
if(!isSupported) {
div.setAttribute(eventName, "return;");
isSupported = (typeof div[eventName] === "function");
}
support[i + "Bubbles"] = isSupported;
}
}
PS: 浏览器检测是一个很纠结,很细节的任务。这个笔记慢慢完善中……
18:30补充:经过IE9的测试,以上大部分IE相关问题都已经不存在。以下是IE9+Win7的测试结果:
复制代码 代码如下:
$.support
{
boxModel: true,
changeBubbles: true,
checkClone: true,
checkOn: true,
cssFloat: true,
deleteExpando: true,
hrefNormalized: true,
htmlSerialize: true,
leadingWhitespace: true,
noCloneEvent: false,
opacity: true,
optSelected: false,
parentNode: true,
scriptEval: true,
style: true,
submitBubbles: true,
tbody: true
}
相关推荐:
OpenAI新产品与现有技术的完美结合:赋能未来的智能变革,培训 ai
SEO怎么设置:让你的网站快速登上搜索引擎首页的秘密,Ai压印分色
ChatGPT网络故障报告从协调世界时(UTC)晚上1107左右开始激增,15分钟内引发广泛关注,ai无视进化
seo网站排名关键词优化,seo网站关键词优化怎么做 ,ai回廊
智能AI写作生成:如何借助人工智能提升创作效率与质量
SEO占位:如何在竞争激烈的市场中占得先机?,梁平区省心全网营销推广
“赞片CMS”-让你的*站点管理更高效、便捷,日照seo平台
SEO模块:提升网站排名,驾驭数字营销未来,营口网站建设制作平台
重生成AI:突破科技前沿,开启智能未来
ChatGPT-深度学习与自然语言处理的革命性突破,金华ai视觉锁螺丝机
AI撰写工具的无限可能,让内容创作更高效、更精彩!
SEO技巧提升网站流量:打造高效网站的关键策略,Ai测脸相
文章写作AI:让创作更高效、精准的智能助手
AI免费免登录:轻松体验人工智能的魔力,无需繁琐注册,华为AI音箱2音质如何
用AI写文章查重率高吗?揭秘AI写作与查重检测的关系
揭开“好的AI软件”背后的秘密:让生活和工作更智能的利器
ChatGPT无法访问原因分析及解决方案,斑马ai报道
怎么用AI生成文章免费版,高效创作从此开始!
ChatGPT诞生背景:人工智能如何突破语言的边界,ai辅助市场调研
SEO通过-如何通过SEO优化让你的业务在搜索引擎中脱颖而出,保定网站建设推广专家
为什么做seo矩阵项目,为什么做seo矩阵项目不能做 ,怎么用ai写作
怎么使用AI生成文章,轻松提升写作效率!
如何识别文章是否由AI写作:技巧与方法解析
SEO获客的秘诀:如何通过搜索引擎优化提升客户获取能力,厦门seo搜索优化排名
SEO优化关键词品牌:如何通过精准的关键词提升品牌价值,ai免费智能写作论文
优化分析:提升企业效益的关键策略,山东大网站建设
洗文章AI:让内容创作变得更智能、更高效
互联网时代的“搜索截流”新玩法:如何抓住流量红利,甘孜做优化网站软件
ChatGPT点不了?背后的真相与解决方法,ai.520523
SEO门户:打造高效网站流量的关键利器,创意网站建设要求
ChatGPT不能加载过去的对话,如何提升你的使用体验?,ai智能衣服
ChatGPT常见问题汇总:解答你关于AI的一切疑惑,松鼠ai智能教适应教育
URL泄露:如何防止信息泄露带来的严重后果,抖音推广营销服务多少钱
SEO专业怎么样?未来发展的无限潜力与职业前景,联通ai智能早教
ChatGPT-4中文免费破解版:无需付费,体验最强AI助手,ai写作生成器官方下载
SEO这样做,轻松引爆流量,助力企业成长,无极标准网站优化好处
SEO是什么意思?揭秘SEO的真正含义与重要性,公司推广网站询问d火18星来
产品经理seo是什么,产品经理seo是什么意思 ,ai政府公文写作 软件
AI工具,让工作效率翻倍:AI工具教程全面解析
英语日记AI生成:轻松提升英语水平的智能助手
个性化广告:新时代营销的秘密武器,建设经营性网站怎么记账
打造内容创作新时代:有言AI生成助力创作者释放灵感
SEO大神如何在激烈的互联网竞争中脱颖而出?,网页设计和网站建设试题
seo进阶买什么书推广,seo的推广技巧 ,菩萨壁纸ai
SEO化学物质:如何在化工行业提升搜索引擎排名和品牌曝光,rack ai
企业SEO:如何通过搜索引擎优化提升企业网络竞争力,安阳网站优化布局设计
SEO做网站点击:提升网站流量的关键策略,国内ai写作论文
SEO优化10种策略:提升网站排名的有效方法,帅气ai男头白底
seo要懂些什么,seo主要做什么的 ,小艾艾AI
AI一键生成文章免费:革新写作方式,提升创作效率