设为首页   加入最爱           最新更新:全方位英文文章资料库
 
资料坊搜索: 标题 全文     
建立各种版本兼容网页
   首页>>YesizeCOM>>电脑技能坊>>Javascript>>正文       
 
广告招租,e-mail:yesize@hotmail.com

广告招租,e-mail:yesize@hotmail.com

   随着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=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 图像拖拽功能的实现

版权说明:作品来源于网上,版权归作者所有,如果无意中侵犯了您的版权,请来信告知,本站将在3个工作日内删除。yesize@hotmail.com
  热门小游戏分类 
射击小游戏 连连看小游戏
台球小游戏 成人小游戏
CS小游戏 化妆小游戏
赛车小游戏 休闲小游戏
篮球小游戏 换装小游戏
儿童小游戏 牛牛小游戏
麻将小游戏 冒险小游戏
美媚小游戏 益智小游戏
体育小游戏  
Society Recreation & Sports
Travel & Leisure Communications
Vehicles Computers
Fashion Arts & Entertainment
Reference & Education Disease & Illness
Writing & Speaking Politics
Product Reviews Food & Beverage
Finance Internet Business
Self Improvement Home & Family
Health & Fitness Business
最新更新内容
警惕“公务员报考热”背
公务员考试不是丈母娘考
一名新公务员的自白:我
公务员考脑筋急转弯与挂
北努斗:2006行政能力测
大讨论:06行测BT题目大
过来人回忆:当年,我也
一家之言:公务员热折射
公务员考试申论要是有正
数十万大学生走进公务员
      粤ICP备05005424         Copyright ©2000 - 2004 Yesize.COM