春去花还在-CoLee★＂ » JavaScript http://colee.99n9.com CoLee的网页设计制作素材、html、javacript、ajax代码精心自编或修改收藏，欢迎大家共享与交流。 Tue, 04 Aug 2009 03:51:52 +0000 http://wordpress.org/?v=2.8 en hourly 1 一个可以左右拖拽的翻页效果 http://colee.99n9.com/%e4%b8%80%e4%b8%aa%e5%8f%af%e4%bb%a5%e5%b7%a6%e5%8f%b3%e6%8b%96%e6%8b%bd%e7%9a%84%e7%bf%bb%e9%a1%b5%e6%95%88%e6%9e%9c/ http://colee.99n9.com/%e4%b8%80%e4%b8%aa%e5%8f%af%e4%bb%a5%e5%b7%a6%e5%8f%b3%e6%8b%96%e6%8b%bd%e7%9a%84%e7%bf%bb%e9%a1%b5%e6%95%88%e6%9e%9c/#comments Wed, 29 Jul 2009 13:34:09 +0000 CoLee★＂ http://colee.99n9.com/?p=217 一个可以左右拖拽的翻页效果

]]> http://colee.99n9.com/%e4%b8%80%e4%b8%aa%e5%8f%af%e4%bb%a5%e5%b7%a6%e5%8f%b3%e6%8b%96%e6%8b%bd%e7%9a%84%e7%bf%bb%e9%a1%b5%e6%95%88%e6%9e%9c/feed/ 0 详解javascript获取url网址信息 http://colee.99n9.com/%e8%af%a6%e8%a7%a3javascript%e8%8e%b7%e5%8f%96url%e7%bd%91%e5%9d%80%e4%bf%a1%e6%81%af/ http://colee.99n9.com/%e8%af%a6%e8%a7%a3javascript%e8%8e%b7%e5%8f%96url%e7%bd%91%e5%9d%80%e4%bf%a1%e6%81%af/#comments Thu, 23 Jul 2009 07:50:32 +0000 CoLee★＂ http://colee.99n9.com/?p=208 用javascript获取url网址信息

执行 用javascript获取url网址信息 代码效果如下

location.host=www.99n9.com
location.hostname=www.99n9.com
location.href=http://www.99n9.com/bc/2008/0306/article_1860.html
location.pathname=/bc/2008/0306/article_1860.html
location.protocol=http:

 

 

详细介绍 window.location方法获取URL

 

统一资源定位符 (Uniform Resource Locator, URL) 完整的URL由这几个部分构成：

scheme://host:port/path?query#fragment

 

scheme:通信协议

常用的http,ftp,maito等

 

host:主机

服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。

 

port:端口号

整数，可选，省略时使用方案的默认端口，如http的默认端口为80。

 

path:路径

由零或多个”/”符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。

 

query:查询

可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页）传递参数，可有多个参数，用”&”符号隔开，每个参数的名和值用”=”符号隔开。

 

fragment:信息片断

字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。(也称为锚点.)

 

示例： 

1, window.location.href

整个URl字符串(在浏览器中就是完整的地址栏)

返回值：http://www.2astudio.com:80/view.asp?id=209#cmt1323

 

2,window.location.protocol

URL 的协议部分

返回值：http:

 

3,window.location.host

URL 的主机部分，

返回值：www.2astudio.com

 

4,window.location.port

URL 的端口部分。如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符。

本例返回值:空

 

5,window.location.pathname

URL 的路径部分(就是文件地址)

返回值：/view.asp

 

6,window.location.search

查询(参数)部分。除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值

返回值：?id=209

 

7,window.location.hash

锚点

返回值：#cmt1323

]]> http://colee.99n9.com/%e8%af%a6%e8%a7%a3javascript%e8%8e%b7%e5%8f%96url%e7%bd%91%e5%9d%80%e4%bf%a1%e6%81%af/feed/ 0 javascript行为事件简介 http://colee.99n9.com/javascript%e8%a1%8c%e4%b8%ba%e4%ba%8b%e4%bb%b6%e7%ae%80%e4%bb%8b/ http://colee.99n9.com/javascript%e8%a1%8c%e4%b8%ba%e4%ba%8b%e4%bb%b6%e7%ae%80%e4%bb%8b/#comments Thu, 23 Jul 2009 03:37:34 +0000 CoLee★＂ http://colee.99n9.com/?p=203 行为事件简介

行为(Behaviors): 为响应某一事件(Event)而采取的一个动作（Action)的过程 。行为由事件和动作两部分组成。

动作（Action）:是一段程序，用于完成某一组特定的操作，如打开一个窗口，播放一段音乐等，Dreamweaver中有20多种行为。

事件（Event):是由用户或浏览器触发的操作，一个事件总是针对网页元素或标签而言，如onMouseOver、onClick、onMouseOut等。
注意：只有在4.0以上版本的浏览器才支持Dreamweaver中的大多数行为，所以我们在使用行为之前要先设置一下浏览器，在Window—–Behavior—-Show Events For—-IE 5.0

 

常用事件：

onAbort—-当用户终止正在打开的网页（下载传输）时发生
onAfterUpdate—-当网页中数据被更新时发生
onFocus—-网页上的元素获得焦点时发生

onBlur—-某元素失去活动焦点时发生（如取消选中的文字）
onChange—-网页上元素的属性发生改变时发生（失去焦点时捕获）
onpropertychange 同上,（能即时捕获）
onClick—-单击网页上的某元素时
onDblclick—-双击网页上的某元素时
onError—-浏览器在打开网页过程中（下载期间）有错误时发生
onHelp—-用户点击浏览器帮助时发生
onKeyDown—-按下任意键时（未释放）
onKeyPress—-按下任意键时（已释放）
onKeyUP—-当按键被释放时发生
onLoad—-网页或图像调入完成后发生
onMouseDown—-在网页的某元素上按下鼠标时发生
onMouseUP—-释放按下的鼠标时发生

onMouseMove—-在网页的某元素上移动鼠标时发生
onMouseOut—-从网页的某元素上移出鼠标时发生
onMouseOver—-从网页的某元素上移入鼠标时发生
onPropertyChange—-当指定元素状态改变时发生
onReset—-重置表单初始值时发生
onResize—-改变浏览器窗口大小时发生
onSelect—-选中文字时发生
onScroll—-滚屏时发生
onStart—-滚动文本开始滚动时发生
onSubmit—-提交表单时发生
onUnload—-从当前网页退出时发生

功能简介
若要给页面添加行为，那么必须先选择对象，可以是链接、图像、图层等元素，也可以整个页面。如果要给整个页面添加行为，则单击文档窗口状态栏中的<body> 。
Shift+F3可快速调出行为控制面板：添加/删除行为按钮、事件栏、动作栏、行为列表窗及行为排序按钮。
1、 调用JavaScript行为：(Call JaveScript)
功能：执行用户自定义的JavaScript脚本。
2、 改变属性行为：（Change Property）
功能：改变元素或对象的属性

Type of Object:选择要改变属性的对象类型
Named Object:选择要改变属性的对象名

Property:Select—选择要改变属性的浏览器
Enter—-如对属性非常熟悉可以直接输入
New Value:输入新的属性值

3、 检查浏览器行为：(Check Browser)
功能：检查浏览器的类型和版本，并据此打
开指定的网页。
Stay on this page:保持在当前网页
Go to URL：打开“URL”中指定的网页
Go to Alt URL: 打开“Alt URL”指定的网页
4、 检查插件行为：(Check Plugin)
功能：根据浏览器安装插件的情况打开指定的网页。
Plugin:Select—选择要检查的插件类型
Enter—-直接输入要检查的插件类型
If Found Go to URL:若浏览器安装有上面指定的插件则打开此处网页，默认为当前页
Otherwise,Go to URL:若浏览器未安装上面指定的插件，则打开此处网页。
Always go to first URL if detection is not possible:当无法检查浏览器插件时，打开”If Found Go To URL”中指定的网页。
5、 控制Shockwave或Flash电影行为：(Control Shockwave or Flash)
功能：控制Shockwave或Flash媒体，如播放、停止等。
Movie:选择要控制的媒体
Action:选择控制所选媒体的方式
Play:播放
Stop:停止
Rewind:返回第一帧
Go To Frame:移到指定帧

6、 拖动层行为：(Drag Layer)
功能：拖动层。如创建一些类似拼图之类的游戏。
<Basic>标签下：
Layer:选择要拖动的层（提前为各层加上不同的标签）
Movement:确定所选层的拖动范围
Unconstrained:在页面上任意拖动
Constrained:在指定范围内拖动（会出现上、下、左、右拖动的距离）
Drop Target:填写所选层拖动的目标位置。单击“Get Current Position”将会自动填入所选层的当前位置。
Snap if Within:在拖动所选层时，当该层离指定的目标位置在多大的范围内时，该层自动移到指定的目标位置（吸入）例如：拼图

7、 转到链接行为：(Go To URL)
功能：在指定的窗口或框架打开指定的网页
Open In:选择网页打开的窗口或页框
URL:指定要打开的网页

8、 跳转菜单行为：(Jump Menu)
功能：编辑和控制跳转菜单
Insert—Form objects—Jump Menu插入一个多项下拉菜单，可以选择带不带GO按钮
9、 执行跳转菜单行为：(Jump Menu Go)
功能：打开跳转菜单中选择的链接
GO按钮的功能：触发不能跳转的项
10、 打开浏览器窗口行为：（Open Browser Window）
功能：在新的浏览器窗口中打开指定的网页
URL to Display:要打开的网页地址
Window Width:新打开窗口的宽度
Window Heigh:新打开窗口的高度
Attributes:属性
Navigation Toolbar:导航工具栏
Menu Bar:菜单栏
Location Toolbar:地址栏
ScrollBars AS Needer:滚动条
Status Bar:状态栏
Resize Handles:是否可以改变窗口大小
Window Name:新窗口的名称
11、 播放音乐行为：(Play Sound)
功能：可以播放MID音乐，并对音乐进行控制。
当添加此行为时，在页面中插入一个插件占位符，选中此占位符，将属性控制面板中的“Parameters”（参数）项中的“LOOP”的值改为“true”时，音乐可以循环播放。
12、 弹出消息行为：(Popup Message)
功能：根据鼠标操作显示指定的信息窗口

13、 预载图像行为：(Preload Images)
功能：预先载入图像，可以使网页中的图像得到一定的缓冲， 在用户与服务器失去联系时还可以继续传送。

14导航条图像行为：(Set Nav Bar Image)
功能：根据用户的鼠标操作显示导航条图像的变化及网页的打开
先插入一个导航条，每一个单元有四种状态：初始、移入、点击、点击后再移入。
然后在页面中选择导航条的第一个单元，单击此行为，出现对话框：
<Basic>标签
<Advanced>标签
Over Image or Over While Down Image:
当鼠标移入选中（第一单元）的单元时改变“Also Set Image”中的其它单元的图像
Also Set Image:选择要改变图像的单元
To Image File:改变后的图像
If Down,To Image File:再次改变后的图像
15、 文本行为：(Set Text)
Set Text of Frame:设置框架中的文本
Set Text of Layer:设置层中的文本
Set Text of Status Bar:设置浏览器状态栏
Set Text of Text Field:设置表单中文本域
16显示/隐藏层行为：(Show-HideLayers)
17、 交换图像行为：(Swap Image)
18、 交换—恢复图像行为：(Swap Image Restore)
类似于我们前面讲过的图像翻转，就是利用了这两个行为。
Images:要变化的图像列表
Set Source to:输入要交换的图像文件
Preload Images:是否预载图像
Restore Images onMouseOut:鼠标移出时，是否恢复原来的图像。
添加了onMouseOver—Swap Image和
onMouseOut—Swap Image Restore行为。

19、 时间线行为：(Time Line)
play timeline:播放时间线上的动作
stop timeline:停止时间线上的动作
Go to timeline frame:循环控制，跳转到指定帧
20、 激活表单行为：(Validate Form)
功能：校验表单数据的合法性

]]> http://colee.99n9.com/javascript%e8%a1%8c%e4%b8%ba%e4%ba%8b%e4%bb%b6%e7%ae%80%e4%bb%8b/feed/ 0 用Javascript获取鼠标坐标的代码 http://colee.99n9.com/%e7%94%a8javascript%e8%8e%b7%e5%8f%96%e9%bc%a0%e6%a0%87%e5%9d%90%e6%a0%87%e7%9a%84%e4%bb%a3%e7%a0%81/ http://colee.99n9.com/%e7%94%a8javascript%e8%8e%b7%e5%8f%96%e9%bc%a0%e6%a0%87%e5%9d%90%e6%a0%87%e7%9a%84%e4%bb%a3%e7%a0%81/#comments Thu, 09 Jul 2009 05:47:38 +0000 CoLee★＂ http://colee.99n9.com/?p=159 用Javascript获取鼠标坐标的代码：

方法1:相对于浏览器窗口坐标
mouX = window.event.clientX;
mouY = window.event.clientY;

方法2:相对于整个页面文档的坐标
mouX = window.event.client.x;
mouY = window.event.client.y;

这里需要注意的是FF并没有event,但我们可以通过把event传递进去就可以了.

比如:

function aa(event){
   alert(event.pageY);
  }

]]> http://colee.99n9.com/%e7%94%a8javascript%e8%8e%b7%e5%8f%96%e9%bc%a0%e6%a0%87%e5%9d%90%e6%a0%87%e7%9a%84%e4%bb%a3%e7%a0%81/feed/ 0 通用滑动门封装类–我的启蒙代码片段 http://colee.99n9.com/%e9%80%9a%e7%94%a8%e6%bb%91%e5%8a%a8%e9%97%a8%e5%b0%81%e8%a3%85%e7%b1%bb-%e6%88%91%e7%9a%84%e5%90%af%e8%92%99%e4%bb%a3%e7%a0%81%e7%89%87%e6%ae%b5/ http://colee.99n9.com/%e9%80%9a%e7%94%a8%e6%bb%91%e5%8a%a8%e9%97%a8%e5%b0%81%e8%a3%85%e7%b1%bb-%e6%88%91%e7%9a%84%e5%90%af%e8%92%99%e4%bb%a3%e7%a0%81%e7%89%87%e6%ae%b5/#comments Mon, 06 Jul 2009 07:58:31 +0000 CoLee★＂ http://colee.99n9.com/?p=132 我对这一个实例彼有感情,因为他是我接触javascript的开始,在我初认识javascript的时候,我从它身上摸索与学习中掌握了不少东西及思想,虽然现在我已经不用它了,但依然怀念它,欣赏它.

]]> http://colee.99n9.com/%e9%80%9a%e7%94%a8%e6%bb%91%e5%8a%a8%e9%97%a8%e5%b0%81%e8%a3%85%e7%b1%bb-%e6%88%91%e7%9a%84%e5%90%af%e8%92%99%e4%bb%a3%e7%a0%81%e7%89%87%e6%ae%b5/feed/ 0 在线繁简体转换器 http://colee.99n9.com/%e5%9c%a8%e7%ba%bf%e7%b9%81%e7%ae%80%e4%bd%93%e8%bd%ac%e6%8d%a2%e5%99%a8/ http://colee.99n9.com/%e5%9c%a8%e7%ba%bf%e7%b9%81%e7%ae%80%e4%bd%93%e8%bd%ac%e6%8d%a2%e5%99%a8/#comments Mon, 06 Jul 2009 07:50:20 +0000 CoLee★＂ http://colee.99n9.com/?p=129 一个可以自动转换简体字成繁体字的JS工具.也可反向转换

]]> http://colee.99n9.com/%e5%9c%a8%e7%ba%bf%e7%b9%81%e7%ae%80%e4%bd%93%e8%bd%ac%e6%8d%a2%e5%99%a8/feed/ 0 javascript拖动层效果-封装类 http://colee.99n9.com/javascript%e6%8b%96%e5%8a%a8%e5%b1%82%e6%95%88%e6%9e%9c-%e5%b0%81%e8%a3%85%e7%b1%bb/ http://colee.99n9.com/javascript%e6%8b%96%e5%8a%a8%e5%b1%82%e6%95%88%e6%9e%9c-%e5%b0%81%e8%a3%85%e7%b1%bb/#comments Sat, 04 Jul 2009 15:44:37 +0000 CoLee★＂ http://colee.99n9.com/?p=95 javascript拖动层效果

]]> http://colee.99n9.com/javascript%e6%8b%96%e5%8a%a8%e5%b1%82%e6%95%88%e6%9e%9c-%e5%b0%81%e8%a3%85%e7%b1%bb/feed/ 0 JavaScript判断浏览器类型及版本 http://colee.99n9.com/javascript%e5%88%a4%e6%96%ad%e6%b5%8f%e8%a7%88%e5%99%a8%e7%b1%bb%e5%9e%8b%e5%8f%8a%e7%89%88%e6%9c%ac/ http://colee.99n9.com/javascript%e5%88%a4%e6%96%ad%e6%b5%8f%e8%a7%88%e5%99%a8%e7%b1%bb%e5%9e%8b%e5%8f%8a%e7%89%88%e6%9c%ac/#comments Fri, 03 Jul 2009 05:56:04 +0000 CoLee★＂ http://colee.99n9.com/?p=83 实例效果在下面,也可以点击这里前往
你知道世界上有多少种浏览器吗？除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外，世界上还有近百种浏览器。

几天前，浏览器家族有刚诞生了一位小王子，就是Google推出的Chrome浏览器。由于Chrome出生名门，尽管他还是个小家伙，没有人敢小看他。以后，咱们常说浏览器的“四大才子”就得改称为“五朵金花”了。

在网站前端开发中，浏览器兼容性问题本已让我们手忙脚乱，Chrome的出世不知道又要给我们添多少乱子。浏览器兼容性是前端开发框架要解决的第一个问题，要解决兼容性问题就得首先准确判断出浏览器的类型及其版本。

JavaScript是前端开发的主要语言，我们可以通过编写JavaScript程序来判断浏览器的类型及版本。JavaScript判断浏览器类型一 般有两种办法，一种是根据各种浏览器独有的属性来分辨，另一种是通过分析浏览器的userAgent属性来判断的。在许多情况下，值判断出浏览器类型之 后，还需判断浏览器版本才能处理兼容性问题，而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道。

我们先来分析一下各种浏览器的特征及其userAgent。

IE

只有IE支持创建ActiveX控件，因此她有一个其他浏览器没有的东西，就是ActiveXObject函数。只要判断window对象存在 ActiveXObject函数，就可以明确判断出当前浏览器是IE。而IE各个版本典型的userAgent如下：

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)
其中，版本号是MSIE之后的数字。
 
 

 

Firefox

Firefox中的DOM元素都有一个getBoxObjectFor函数，用来获取该DOM元素的位置和大小（IE对应的中是 getBoundingClientRect函数）。这是Firefox独有的，判断它即可知道是当前浏览器是Firefox。Firefox几个版本的 userAgent大致如下：
Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12
其中，版本号是Firefox之后的数字。

Opera

Opera提供了专门的浏览器标志，就是window.opera属性。Opera典型的userAgent如下：

Opera/9.27 (Windows NT 5.2; U; zh-cn)
Opera/8.0 (Macintosh; PPC Mac OS X; U; en)
Mozilla/5.0 (Macintosh; PPC Mac OS X; U; en) Opera 8.0
其中，版本号是靠近Opera的数字。
 
 

 

Safari

Safari浏览器中有一个其他浏览器没有的openDatabase函数，可做为判断Safari的标志。Safari典型的userAgent如下：

Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13
Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3
其版本号是Version之后的数字。
 
 

 

Chrome

Chrome有一个MessageEvent函数，但Firefox也有。不过，好在Chrome并没有Firefox的getBoxObjectFor 函数，根据这个条件还是可以准确判断出Chrome浏览器的。目前，Chrome的userAgent是：

Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13
其中，版本号在Chrome只后的数字。
有趣的是，Chrome的userAgent还包含了Safari的特征，也许这就是Chrome可以运行所有Apple浏览器应用的基础吧。
只要了解了以上信息，我们就可以根基这些特征来判断浏览器类型及其版本了。我们会将判断的结果保存在Sys名字空间中，成为前端框架的基本标志信息，供今 后的程序来读取。如果判断出谋种浏览器，Sys名字空间将有一个该浏览器名称的属性，其值为该浏览器的版本号。例如，如果判断出IE 7.0，则Sys.ie的值为7.0；如果判断出Firefox 3.0，则Sys.firefox的值为3.0。下面是判断浏览器的代码：
 
 

 

 

 

 

 

 

 

 

Code  
CODE:
<script type=”text/javascript”>
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject)
Sys.ie = ua.match(/msie ([\d.]+)/)[1]
else if (document.getBoxObjectFor)
Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
else if (window.MessageEvent && !document.getBoxObjectFor)
Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]
else if (window.opera)
Sys.opera = ua.match(/opera.([\d.]+)/)[1]
else if (window.openDatabase)
Sys.safari = ua.match(/version\/([\d.]+)/)[1];

//以下进行测试
if(Sys.ie) document.write(’IE: ‘+Sys.ie);
if(Sys.firefox) document.write(’Firefox: ‘+Sys.firefox);
if(Sys.chrome) document.write(’Chrome: ‘+Sys.chrome);
if(Sys.opera) document.write(’Opera: ‘+Sys.opera);
if(Sys.safari) document.write(’Safari: ‘+Sys.safari);

</script>

 

 

 

 

我们把对IE的判断放在第一，因为IE的用户最多，其次是判断Firefox。按使用者多少的顺序来判断浏览器类型，可以提高判断效率，少做无用功。之所 以将Chrome放在第三判断，是因为我们预测Chrome很快会成为市场占有率第三的浏览器。其中，在分析浏览器版本时，用到了正则表达式来析取其中的 版本信息。
如果你的JavaScript玩得很高，你还可以将前面的判断代码写成这样：

 

 

 

 

 

 

 

Code 
CODE:
<script type=”text/javascript”>
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
window.ActiveXObject ? Sys.ie = ua.match(/msie ([\d.]+)/)[1] :
document.getBoxObjectFor ? Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1] :
window.MessageEvent && !document.getBoxObjectFor ? Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1] :
window.opera ? Sys.opera = ua.match(/opera.([\d.]+)/)[1] :
window.openDatabase ? Sys.safari = ua.match(/version\/([\d.]+)/)[1] : 0;

//以下进行测试
if(Sys.ie) document.write(’IE: ‘+Sys.ie);
if(Sys.firefox) document.write(’Firefox: ‘+Sys.firefox);
if(Sys.chrome) document.write(’Chrome: ‘+Sys.chrome);
if(Sys.opera) document.write(’Opera: ‘+Sys.opera);
if(Sys.safari) document.write(’Safari: ‘+Sys.safari);
</script>

 

 

 

 

这样可以使JavaScript代码更精简些。当然，可读性稍差一些，就看你是重视效率还是重视可维护性了。

使用不同特征来判断浏览器的方法，虽然在速度上比用正则表达式分析userAgent要来的快，不过这些特征可能会随浏览器版本而变化。比如，一种浏览器 本来独有的特性取得了市场上的成功，其他浏览器也就可能跟着加入该特性，从而使该浏览器的独有特征消失，导致我们的判断失败。因此，相对比较保险的做法是 通过解析userAgent中的特征来判断浏览器类型。何况，反正判断版本信息也需要解析浏览器的userAgent的。

通过分析各类浏览器的userAgent信息，不难得出分辨各类浏览器及其版本的正则表达式。而且，对浏览器类型的判断和版本的判断完全可以合为一体地进行。于是，我们可以写出下面的代码：

 

 

 

 

 

 

 

   
CODE:
<script type=”text/javascript”>
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

//以下进行测试
if (Sys.ie) document.write(’IE: ‘ + Sys.ie);
if (Sys.firefox) document.write(’Firefox: ‘ + Sys.firefox);
if (Sys.chrome) document.write(’Chrome: ‘ + Sys.chrome);
if (Sys.opera) document.write(’Opera: ‘ + Sys.opera);
if (Sys.safari) document.write(’Safari: ‘ + Sys.safari);
</script>

CODE:

<script type=”text/javascript”>
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

//以下进行测试
if (Sys.ie) document.write(’IE: ‘ + Sys.ie);
if (Sys.firefox) document.write(’Firefox: ‘ + Sys.firefox);
if (Sys.chrome) document.write(’Chrome: ‘ + Sys.chrome);
if (Sys.opera) document.write(’Opera: ‘ + Sys.opera);
if (Sys.safari) document.write(’Safari: ‘ + Sys.safari);
</script>

 

 

 

 

其中，采用了“… ? … : …”这样的判断表达式来精简代码。判断条件是一条赋值语句，既完成正则表达式的匹配及结果复制，又直接作为条件判断。而随后的版本信息只需从前面的匹配结果中提取即可，这是非常高效的代码。
以上的代码都是为了打造前端框架所做的预研，并在五大浏览器上测试通过。今后，判断某种浏览器只需用if(Sys.ie)或 if(Sys.firefox)等形式，而判断浏览器版本只需用if(Sys.ie == ‘8.0′)或if(Sys.firefox == ‘3.0′)等形式，表达起来还是非常优雅的。

前端框架项目已经启动，一切就看过程和结果了…

 

另一种方法:

<script language=”javascript”>
if (window.XMLHttpRequest) { //Mozilla, Safari,…IE7
 alert(’Mozilla, Safari,…IE7 ‘);
 if(!window.ActiveXObject){ // Mozilla, Safari,…
  alert(’Mozilla, Safari’);
 } else {
  alert(’IE7′);
 }
} else {
 alert(’IE6′);
}
</script>

]]> http://colee.99n9.com/javascript%e5%88%a4%e6%96%ad%e6%b5%8f%e8%a7%88%e5%99%a8%e7%b1%bb%e5%9e%8b%e5%8f%8a%e7%89%88%e6%9c%ac/feed/ 0 使用javascript来检测flash播放器 http://colee.99n9.com/%e4%bd%bf%e7%94%a8javascript%e6%9d%a5%e6%a3%80%e6%b5%8bflash%e6%92%ad%e6%94%be%e5%99%a8/ http://colee.99n9.com/%e4%bd%bf%e7%94%a8javascript%e6%9d%a5%e6%a3%80%e6%b5%8bflash%e6%92%ad%e6%94%be%e5%99%a8/#comments Thu, 02 Jul 2009 14:13:52 +0000 CoLee★＂ http://colee.99n9.com/?p=54 使用javascript来检测flash播放器是否安装,如果安装则输出版本号

]]> http://colee.99n9.com/%e4%bd%bf%e7%94%a8javascript%e6%9d%a5%e6%a3%80%e6%b5%8bflash%e6%92%ad%e6%94%be%e5%99%a8/feed/ 0 网页title闪烁效果 http://colee.99n9.com/%e7%bd%91%e9%a1%b5title%e9%97%aa%e7%83%81%e6%95%88%e6%9e%9c/ http://colee.99n9.com/%e7%bd%91%e9%a1%b5title%e9%97%aa%e7%83%81%e6%95%88%e6%9e%9c/#comments Tue, 30 Jun 2009 08:52:22 +0000 CoLee★＂ http://colee.99n9.com/?p=20 网页title闪烁效果
 做为页面消息提示很不错的!

]]> http://colee.99n9.com/%e7%bd%91%e9%a1%b5title%e9%97%aa%e7%83%81%e6%95%88%e6%9e%9c/feed/ 0