建立各种版本兼容网页 -pc6资讯

您的位置：首页 → 网络冲浪 → 网络技术 → 建立各种版本兼容网页

建立各种版本兼容网页 时间：2004/10/8 16:48:00来源：本站整理作者：蓝点我要评论(0): 　　　　随着Netscape Navigator和Microsoft Internet Explorer的各自发布，Web网页开发者们正经历一些有趣的挑战：怎样在两种崭新的浏览器中开发动态的HTML网页，并且这些网页仍能被旧版本的浏览器识别？网页开发者们或许可以认为强迫访问者访问他们的网页时必须使用最新版本的浏览器，但是这种途径无疑会限制网页的访问者的数量。我们看到大多数网点正想方设法在避免这一情况的发生。为某一网点限制那些仅仅适应一个浏览器所能浏览的网页的方法也是不可行的。
本文描述两种方法设法缩小网页在浏览器版本显示上的差别。

●重定位浏览器载入网页●
有很多的方法可以实现，一个策略是为不同浏览器和不同版本建立相应的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.gif'width=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的IE3.x将存取并且执行发现在“javaScript”块的；描述语言。而Navigator3.x将直接运行“javaScript1.1” 标记节的描述语言。Nt的函数、Navigator2.x的IE3.x将存取并且执行发现在“javaScript”块的；描述语言。而Navigator3.x将直接运行“javaScript1.1” 标记节的描述语言。 3.x将存取并且执行发现在“javaScript”块的；描述语言。而Navigator3.x将直接运行“javaScript1.1” 标记节的描述语言。

文章评论

查看所有0条评论>>