当前页面: 开发资料首页 → Javascript 专题 → 建立各种版本兼容网页
建立各种版本兼容网页
摘要: 建立各种版本兼容网页
本文描述两种方法设法缩小网页在浏览器版本显示上的差别。
●重定位浏览器载入网页●
有很多的方法可以实现，一个策略是为不同浏览器和不同版本建立相应的
Web页，然后由CGI程序装载适当的在某个浏览器版本上工作得较好的网页。
这种方法比较可行。如果你在script语言支持的浏览器上预先查看自己开
发的网页，将会得到理想的效果。
当浏览器装入Web页时激活onLoad事件，重定位网页。激活的onLoad事件用
< BODY >标记，使用代码：
< BODYonLoad=change—document() >appVersion和appName可以发现
是哪个浏览器版本在存取本页，重定位相应内容的URL(统一资源地址)：
< SCRIPTLanguage=JavaScript >
functionchange—document(){
varMS=navigator.appVersion.indexOf(MSIE)
varMSVER=parseInt(navigator.appVersion.substring
(MS＋5，MS＋6))
varNSVER=parseInt(navigator.appVersion.substring
(0，1))
varlocstring
if(MS >0)
locstring=diffie＋MSVER＋.html
elseif(navigator.appName==Netscape)
locstring=diffns＋NSVER＋.html
window.location=locstring
) //-- >
< /SCRIPT >
虽然不同类型浏览器处理网页的差别在缩小，但如果你想要同时使用
NetscapeNavigator2.x、3.x、4.x和InternetExplorer3.x及4.x中
不同浏览器之间的某些新技术，这就需要在你的节点为每一内容网页建立
五个页面以对应相应浏览器，才能取得最佳显示效果!幸运的是，你可以
在你的节点中有选择地使用一些新技术，这种想法比较简单省事。例如你
想有一个产品交互介绍页，现在因为每种浏览器都已实现动态HTML技术，
只需使用每种浏览器兼容的动态HTML技术，而给访问者自由使用浏览器
版本的权限。
●在网页中检测浏览器/版本●
保证script能在适当浏览器/版本执行。我们用以下例子来说明如何为不
同版本之间的浏览器改变网页背景颜色。这种方法在Netscape2.x中可以
实现得很好；对于InternetExplorer3.x，CSS1风格将重新定义< H1 >标记
的外观；对于Netscape3.x，当文件首先打开时图象会作相应的改变；对
于IE4.0，图象也将改变，为< H1 >的风格定义标记也将变化(字体大小和
颜色)；最后，对于Netscape4.0，< H1 >标记将改变，但是这次使用的是
动态的风格页(DSS)技术，意味着那JavaScript描述语言能适用在
JavaScript风格页(JSS)元素中。
现在Web网页常使用一些风格页来预先定义，JavaScript风格页和标准的
CSS1(Cascading风格页)如下定义：
< STYLETYPE=text/JavaScript >
classes.class1.H1.fontSize=24pt；
classes.class1.H1.color=green；
classes.class2.H1.fontSize=18pt；
classes.class2.H1.color=red；
< /STYLE >
< STYLETYPE=text/css >
H1.newstyle{font－size：18pt；color：red)
margin－top：－.05in；margin－left：1.0in)
H1{font：24pt；color：green)
< /STYLE >
这些风格页预先定义提供新格式为< H1 >标记，全局变量定义存取当前页的
浏览器类型和版本。在本文中我们使用JavaScript来定义。一旦定义后，
JavaScript可在任何地方使用。
< SCRIPTLanguage=JavaScript >
< !--
varMS=navigator.appVersion.indexOf(MSIE)
window.isIE4=(MS >0)& &
((parseInt(navigator.appVersion.substring(MS＋5，MS＋6))
>=4)& & (navigator.appVersion.indexOf(MSIE)) >0)
varNSVER=parseInt(navigator.appVersion.substring(0，1))
isNS4=false
isNS3=false
if(navigator.appName==Netscape){
if(NSVER==3){isNS3=true)
elseif(NSVER >=4){
isNS3=true
isNS4=true)
)
change—doc函数允许所有版本的浏览器在存取网页时改变网页的背景颜
色。另外，如果浏览器是Netscape3.x或4.x，它调用另外的JavaScript
函数change—document3。
functionchange—document(){
document.bgColor=beige
if(isNS3)change—document3())
JavaScript函数change—new仅能由IE4.0调用。这个函数将使用Microsoft
动态的HTML技术：定义有myheader标志的新的风格< H1 >标记，
functionchange—new(){
varchgh1=document.all.myheader
chgh1.className=newstyle)
//-- >
< /SCRIPT >
在JavaScript的不同版本中，以上描述语言可作为其它的函数被使用。首
先，使用JavaScript1.1，我们在显示网页时用change—document3函数改
变图象。最后测试isNS3的值，如果为真，调用change—document4。当浏
览器为Netscape3.x或Netscape4.x，isNS3全局变量被设置为真。
< SCRIPTLanguage=JavaScript1.1 >
< !--
functionchange—document3(){
if(!isNS4)document.thisimage.src=sun.gif
elsechange—document4())
//-- >
< /SCRIPT >
使用JavaScript1.1标志意味着任何script块内的程序仅能由支持script
语言的浏览器来执行。这在Netscape3.x和4.x、IE3.0x和4.x中，处理
都是一样的。
change—document4函数，是由Javascript1.2建立的程序语言块。现在这
种功能仅能在Navigator4.x使用。script使用< LAYER >标记封装最初的内
容页，当函数被调用时，内容是隐藏的，新的内容由一个新的LAYER对象来
创建：
< SCRIPTLanguage=Javascript1.2 >
< !--
functionchange—document4(){
document.layers[0].visibility=hide
newlayer=newLayer(600)
newlayer.visibility=inherit
newlayer.document.write(< imgsrc=′sun.gif′width=76height=76alt=′sun′ >)
newlayer.document.write(< H1class=class2 >Headerforthisexamplepage< /H1 >)
newlayer.document.close()
)
//-- >
< /SCRIPT >
< HEAD >节，在< BODY >标记，我们激活onLoad事件。这个事件将核对浏览器
版本，如果浏览器为InternetExplorer4.0，则调用change—new，
change—document和change—document3函数。当检测到另外的浏览器时，
则调用change-document函数。另外，我们建立图象定义和< H1 >内容：
< BODY
onLoad =if(window.isIE4){change-new}();change-document();change-document3();}
else change-document(); >
< LAYER >
< img src=rain.gifwidth=76height=76 alt=rain name=this image >
< H1 id =myheader >Header for this example page< /H1 >
< /LAYER >
这个方法仅仅执行适当的script语句就能检测到浏览器的类型和版本，一
些常用功能在不同的javascript版本且Navgatror的不同版本都可以使用，
与编码事件有关的功能仅在特定的版本被实现。因此可以在一页中为
Navigator3.x 建立一个新的Image对象；为Navigator4.x用LAUER标记并封
装代码。使用script特定标志来保证相应浏览器去处理相应得javascript
代码。例如，我们可使用称为change-document的函数、Navigator2.x的IE
3.x将存取并且执行发现在“javaScript”块的；描述语言。而Navigator
3.x将直接运行“javaScript1.1” 标记节的描述语言。
nt的函数、Navigator2.x的IE
3.x将存取并且执行发现在“javaScript”块的；描述语言。而Navigator
3.x将直接运行“javaScript1.1” 标记节的描述语言。 3.x将存取并且
执行发现在“javaScript”块的；描述语言。而Navigator
3.x将直接运行“javaScript1.1” 标记节的描述语言。
↑返回目录
前一篇: Img 图像拖拽功能的实现
后一篇: 怎么弹出一个新的窗口