巧用Behaviors检测浏览器

发布: 2007-5-05 18:35 | 作者: 网络转载 | 来源: 赛迪网 | 查看: 37次 | 进入软件测试论坛讨论

　我们知道，网页浏览器到目前为此还没有一个统一的标准，从而造成了在一种浏览器中很漂亮的页面，而在那一种浏览器中却面目全非的现象，为了减少这种现象出现，我们往往要根据主流的几种浏览器来设计同一内容不同格式的网页。目前在国内IE有绝对的占有率，在这种情况下我们设计的网页只要兼容它就行了，但NetScape在国外还是有很多人使用，毕竟她是浏览器的元老。Dreamweaver3为我们设计和调试不同浏览器的网页提供了许多方便，关于这一点我另有专用介绍。那么当我们设计了适合不同浏览器的网页，又如何自动地检测访客的浏览器从而显示不同的网页呢？这个问题看起来比较复杂。但用Behaviors的Check Browser动作可以很轻松地解决。在用此方法之前，你必须准备三个同一内容的页面，一个适合IE浏览器的（设为IEpage.htm）；一个适合NetScape浏览器的（设为NSpage.htm)；另一个适合其它浏览器的（设为Otherpage.htm）。下面我们讲具体方法：
　　1、考虑到国内大部分是IE浏览器，所以我们把Check Browser动作放在适合IE浏览器的网页上。那么我们就在Dreamweaver3中打开该网页（IEpage.htm）。由于我们希望能在载入网页时能自动检测浏览器并自动打开相应的页面，自然想到用“onLoad”来作触发事件，但Behaviors使用“onLoad”这个触发事件是有条件的，这我放到本文的后面讲，先用老一套办法来解决。选取几个文字做一个空链接，再按F8调出Behaviors面板，在面板上点击“+”图标，然后在拉出的菜单中选择Check Browser动作，弹出的Check Browser对话框如下图所示：

　　图1 Check Browser动作对话框

　　初看这个编辑窗口那么多参数，还有好多选项，不要紧张，搞清楚这个动作的原理就不必害怕了，这个动作是由一组复杂的条件语句完成的，根据判断的结果做出选择，在三个网页当中选其一。这个动作可以明确判断两种浏览器：Netscape 和IE，不是这两种浏览器一概做Other Browser 处理。判断每一种浏览器都会有三种选项，Go to URL（打开一指定文件），Go to Alt URL（打开另一指定页面），Stay on this page（停留在该页面）。URL和Alt URL是定义Go to URL 和Go to Alt URL所指向页面的。
　　2、那么具体应该如何填这些参数呢？我们在选择参数之前首先要明确我们的目的，我们希望的结果是：若是IE浏览器则就是当前页面；若是NetScape浏览器则打开NSpage.htm；若都不是则打开Otherpage.htm。那么应该这样填：在Internet Explorer4.0 or Later右面的输入框中点击那个三角形图标，选择“Stay on this Page”；在Netscape Navigator4.0 or Later右面的输入框中点击那个三角形图标，选择“Go to URL”；在Other Browsers右面的输入框中点击那个三角形图标，选择“Go to URL”；在URL中填入NSpage.htm；在Alt URL中填入Otherpage.htm。按OK返回Behaviors面板。当然，你也可以根据你的需要采用其它的填参数方法，另外，在URL和Alt URL的网页文件名也可以点击其右边的文件浏览器去查找，找到后直接选取就行，不一定要手动输入。但有一点要注意：你的Check Browser行为应该加到Stay on this page 的页面中，否则就起不了作用。
　　3、打开源代码检视窗，我们看到空链接中的代码是这样的：
< a href="#" onClick="MM_checkBrowser(4.0,0,2,4.0,1,2,2,'bhjq1.htm','bhjq2.htm');return document.MM_returnValue" >
　　我们把中间那段调用动作的代码剪切后移到标记中，并把“onClick”改为“onLoad”，且把那个空链接删除。这样当载入该网页时就会自动检测用户的浏览器并根据不同的浏览器自动打开不同格式的网页了，是不是妙极了！这么复杂的问题想不到就这么简单就解决了。
　　若是你是刚开始制作这个网页或能找到页面的空白处，就可以不用做空链接，而直接点一下空白处，然后按F8调出Behaviors面板来设置Check Browses动作，此后的操作与上面相同，这样在Behaviors的面板就有“onLoad”触发事件了。这里要特别注意的是页面的空白处而不是层或表格等的空白处，否则将没有“onLoad”触发事件事件供你选择。由于我们一般排好版后的网页找空白处比较困难，所以我着重介绍了上面的变通办法。