学院首页>网页制作>Javascript>建立各种版本兼容网页

建立各种版本兼容网页

作者:未知 来源:未知 添加时间:2006-5-21 9:32:53
随着NetscapeNavigator4.0和MicrosoftInternetExplorer4.0版的发布,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="/edu/files/pic/2006-5/21/0652109325318315.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的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” 标记节的描述语言。
站内搜索