目前大多数的 JS框架都有跨浏览器到功能,他们会根据不同的浏览器来执行不同的代码,从而达到一致的功能。
GWT也有这种兼容所有浏览器到功能,他是如何实现的呢。
GWT中每一个模块都有一个gwt.xml配置文件,
如: com.google.gwt.dom.DOM.gwt.xml这个配置文件
<module>
<inherits name="com.google.gwt.core.Core"/>
<inherits name="com.google.gwt.user.UserAgent"/>
<replace-with class="com.google.gwt.dom.client.DOMImplOpera">
<when-type-is class="com.google.gwt.dom.client.DOMImpl"/>
<when-property-is name="user.agent" value="opera"/>
</replace-with>
<replace-with class="com.google.gwt.dom.client.DOMImplSafari">
<when-type-is class="com.google.gwt.dom.client.DOMImpl"/>
<when-property-is name="user.agent" value="safari"/>
</replace-with>
<replace-with class="com.google.gwt.dom.client.DOMImplIE8">
<when-type-is class="com.google.gwt.dom.client.DOMImpl"/>
<when-property-is name="user.agent" value="ie8"/>
</replace-with>
<replace-with class="com.google.gwt.dom.client.DOMImplIE6">
<when-type-is class="com.google.gwt.dom.client.DOMImpl"/>
<when-property-is name="user.agent" value="ie6"/>
</replace-with>
<replace-with class="com.google.gwt.dom.client.DOMImplMozilla">
<when-type-is class="com.google.gwt.dom.client.DOMImpl"/>
<when-property-is name="user.agent" value="gecko1_8"/>
</replace-with>
<replace-with class="com.google.gwt.dom.client.DOMImplMozillaOld">
<when-type-is class="com.google.gwt.dom.client.DOMImpl"/>
<when-property-is name="user.agent" value="gecko"/>
</replace-with>
</module>
这里有很多replace-with的标签,仔细想一下应该可以猜到他的功能。
当属性user.agent的值为ie6时,用com.google.gwt.dom.client.DOMImplIE6这个类来实现com.google.gwt.dom.client.DOMImpl这个抽象类。
也就是说GWT通过判断user.agent来判断用户使用的是什么浏览器,然后用相应的实现类来执行,从而达到不同浏览器到兼容性。
那么这个user.agent属性是哪来的呢,观察这个xml的开头可以看到此模块继承了<inherits name="com.google.gwt.user.UserAgent"/>
应该可以在这个UserAgent模块里看出端倪来。
看一下UserAgent模块的xml文件
<module>
<!-- Browser-sensitive code should use the 'user.agent' property -->
<define-property name="user.agent" values="ie6,ie8,gecko,gecko1_8,safari,opera"/>
<property-provider name="user.agent"><![CDATA[
var ua = navigator.userAgent.toLowerCase();
var makeVersion = function(result) {
return (parseInt(result[1]) * 1000) + parseInt(result[2]);
};
if (ua.indexOf("opera") != -1) {
return "opera";
} else if (ua.indexOf("webkit") != -1) {
return "safari";
} else if (ua.indexOf("msie") != -1) {
if (document.documentMode >= 8) {
return "ie8";
} else {
var result = /msie ([0-9]+)\.([0-9]+)/.exec(ua);
if (result && result.length == 3) {
var v = makeVersion(result);
if (v >= 6000) {
return "ie6";
}
}
}
} else if (ua.indexOf("gecko") != -1) {
var result = /rv:([0-9]+)\.([0-9]+)/.exec(ua);
if (result && result.length == 3) {
if (makeVersion(result) >= 1008)
return "gecko1_8";
}
return "gecko";
}
return "unknown";
]]></property-provider>
<!-- Deferred binding to optimize JRE classes based on user agent. -->
<inherits name="com.google.gwt.emul.EmulationWithUserAgent"/>
</module>
这里有一个property-provider标签,这就是提供user.agent属性的标签,
CDATA里面的代码就是js代码,通过这个js代码来判断浏览器类型
仔细看一下这段js代码:
var ua = navigator.userAgent.toLowerCase();
var makeVersion = function(result) {
return (parseInt(result[1]) * 1000) + parseInt(result[2]);
};
if (ua.indexOf("opera") != -1) {
return "opera";
} else if (ua.indexOf("webkit") != -1) {
return "safari";
} else if (ua.indexOf("msie") != -1) {
if (document.documentMode >= 8) {
return "ie8";
} else {
var result = /msie ([0-9]+)\.([0-9]+)/.exec(ua);
if (result && result.length == 3) {
var v = makeVersion(result);
if (v >= 6000) {
return "ie6";
}
}
}
} else if (ua.indexOf("gecko") != -1) {
var result = /rv:([0-9]+)\.([0-9]+)/.exec(ua);
if (result && result.length == 3) {
if (makeVersion(result) >= 1008)
return "gecko1_8";
}
return "gecko";
}
return "unknown";
navigator.userAgent.toLowerCase();
这句话就能拿到浏览器的相关信息,并把它们变成小写字母。
不同浏览器提供的内容不同,分别如下、
IE
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)
其中,版本号是MSIE之后的数字。
Firefox
Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12
其中,版本号是Firefox之后的数字。
Opera
Opera/9.27 (Windows NT 5.2; U; zh-cn)
Opera/8.0 (Macintosh; PPC Mac OS X; U; en)
Mozilla/5.0 (Macintosh; PPC Mac OS X; U; en) Opera 8.0
其中,版本号是靠近Opera的数字。
Safari
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13
Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3
其版本号是Version之后的数字。
Chrome
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13
其中,版本号在Chrome只后的数字。
就是对这个字符串进行判断,来得知浏览器类型,然后设置属性user.agent来告知gwt程序
分享到:
相关推荐
gwt浏览器插件 谷歌 火狐 ie。。。。
EXT-GWT2.0.1+API+DOC gwtdesigner Gwt-Ext基础-中级-进阶 GWT快速开发 GWT入门 GWT中文教程
GWT浏览器插件离线安装包 Chrome
在大多数情况下,用GWT开发出来的程序会支持IE、Firefox、Mozilla、Safari和Opera,用户在开发的时候不必担心浏览器的兼容性问题。而浏览器的兼容性问题也是用直接用Javascript进行Ajax应用开发所面临的一个另...
GWT浏览器插件离线安装包Firefox
Gwt中文手册,GWt入门Gwt中文手册,GWt入门Gwt中文手册,GWt入门
EXT-GWT2.0.1+API+DOC Gwt-Ext基础-中级-进阶GWT中文教程
1.gwt中实现tree状菜单,tree是一次性加载 2。其中还用源代码。
gwt开发实例实现web +ajax
GWT中文教程(入门进阶) 通过实例详细介绍GWT
Gwt浏览器插件,已及对应的浏览器,安装浏览器后将插件拖拽到浏览器上即可
我已经测试过,这个插件可以在360极速浏览器上运行起来,我的360版本号9.5.0 的
填《GWT揭秘》中8.1节中--GWT中的XMLHTTPRequest:请求动态数据的代码,
gwt 练习gwt 练习gwt 练习gwt 练习
最新火狐浏览器GWT开发插件,离线安装。不用在线等待!
实现原理:通过GWT的RPC来调用Spring 传过来的服务器端数据 注意:需要的jar包 * gwt-user.jar * gwt-servlet.jar * mysql-connectot-java-3.1.12.jar * spring.jar * commons-dbcp.1.2.1.jar * coommons-pool...
GWT快速开发(GWT) 是一个Java软件开发框架用于开发类似于Google Maps和Gmail的AJAX应用程序。GWT的设计参考Java AWT包设计,类...你可以用Java编程语言开发你的界面,然后用GWT编译器将Java类转换成适合浏览器执行的...
该DEMO适合初学GWT的人观看,希望能帮到初学者,注释详细。
fwefwefwGWT工具GWT工具GWT工具GWT工具GWT工具GWT工具