IE中jscript/javascript的条件编译


Posted in Javascript onSeptember 07, 2006

IE中jscript/javascript的条件编译

  • 作者:JavaScript Kit
  • 译者:子乌(Sheneyan)
  • 翻译日期:2006-02-12
  • 英文原文:Conditional Compilation of JScript/ JavaScript in IE
  • 版权:翻译未经过javascript kit同意,我只对我所翻译的中文部分负责。版权归原作者所有。

条件编译概述

在IE中,有一个鲜为人知的功能叫做条件编译。自从IE4开始支持这个功能,它由于在一些Ajax相关的javascript脚本中出现而受到一些关注。条件编译作为一种独立形式的对象判断,使得IE可以根据预定义或用户定义的条件来决定你的jscript或javascript代码特定部分是否编译。也可以把它看成是你的代码的条件注释,使你的代码能够在非IE浏览上也顺利运行。

语法概述

通过在你的脚本中使用@cc_on来激活条件编译,或者直接使用@if或者@set等等作为CC逻辑中一部分的句子来激活它。这里是一个示范例子:

Language:javascript, parsed in: 0.007 seconds, using GeSHi 1.0.7.12
  1. <script type="text/javascript">
  2.  
  3. /*@cc_on
  4. document.write("JScript 版本: " + @_jscript_version + ".<br>");
  5.    /*@if (@_jscript_version >= 5)
  6.       document.write("JScript 版本 5.0+.<br \/>");
  7.       document.write("只有当浏览器支持JScript5+的时候你才能看到这些文字.<br>");
  8.    @else @*/
  9.       document.write("当你使用其他浏览器(比如: Firefox, IE 4.x 之类)的时候看到这行文字<br>");
  10.    /*@end
  11. @*/
  12.  
  13. </script>
  14.  
例子:
JScript 版本: 5.6.
JScript 版本 5.0+.
只有当浏览器支持JScript5+的时候你才能看到这些文字。

如果你使用IE(任何版本),你应该能够看到第一个document.write()的输出,如果是IE5+,接下来的两个document.write()你也能够看见(因为从IE5开始支持JScript 5)。最后一个document.write()方法是为了其他非IE5+浏览器服务的,无论是Firefox,opera,IE4,或者什么别的。条件编译依赖于类似在条件注释中使用的注释标签,以确保它在所有浏览器中都能工作顺畅。

当使用条件编译的时候,最好先通过@cc_on语句来激活它,只有这样你才能在你的脚本中包含注释标签以保证浏览器兼容,、就好像上面例子中所显示的那样。(子乌注:这句英文我翻译的不是很顺...看起来似乎与上面的句子矛盾)

@if, @elif, @else,@end 语句

在这个奇怪的开场白之后,这里是一些用于条件便于的条件语句:

  • @if
  • @elif
  • @else
  • @end

现在让我们看一些“古怪”的例子。

if else 逻辑 (排除IE外的浏览器)
Language:javascript, parsed in: 0.001 seconds, using GeSHi 1.0.7.12
  1. /*@cc_on
  2.    @if (@_win32)
  3.       document.write("操作系统是32位windows。浏览器是IE。");
  4.    @else
  5.       document.write("操作系统不是32位windows。浏览器是IE。");
  6.    @end
  7. @*/
  8.  

这是一段完整的脚本,只被ie浏览器所识别并忽略其他所有浏览器,这段脚本在不同的操作系统上将显示不同的内容。对比一下下面这个例子……

if else 逻辑2 (包含其他浏览器)
Language:javascript, parsed in: 0.004 seconds, using GeSHi 1.0.7.12
  1. /*@cc_on
  2.    /*@if (@_win32)
  3.       document.write("操作系统是32位windows。浏览器是IE。");
  4.    @else @*/
  5.       document.write("浏览器不是IE (如: Firefox)或者浏览器不是在32位windows下的IE。");
  6.    /*@end
  7. @*/
  8.  

熟练使用注释标签,这个例子中的else部分能够包含所有的非ie浏览器(如firefox),以及非32位windows下的IE。努力的研究这段注释,直到你脑袋发昏,你就会明白这个逻辑了:)

if, elseif, else逻辑 (排除IE外的浏览器)

继续吧,可以看全部内容了:

Language:javascript, parsed in: 0.001 seconds, using GeSHi 1.0.7.12
  1. /*@cc_on
  2.    @if (@_jscript_version >= 5)
  3.       document.write("IE Browser that supports JScript 5+");
  4.    @elif (@_jscript_version >= 4)
  5.       document.write("IE Browser that supports JScript 4+");
  6.    @else
  7.       document.write("Very old IE Browser");
  8.    @end
  9. @*/
  10.  
if, elseif, else 逻辑2(包含其他浏览器)
Language:javascript, parsed in: 0.004 seconds, using GeSHi 1.0.7.12
  1. /*@cc_on
  2.    /*@if (@_jscript_version >= 5)
  3.       document.write("IE Browser that supports JScript 5+");
  4.    @elif (@_jscript_version >= 4)
  5.       document.write("IE Browser that supports JScript 4+");
  6.    @else @*/
  7.       document.write("Non IE Browser (one that doesn't support JScript)");
  8.    /*@end
  9. @*/
  10.  

全面的处理。在这最后一个例子中,最后一个else语句包含了所有非IE浏览器。

条件编译变量

在之前一部分中你看到了一些奇怪变量比如@_win32。这是一些你能够用来判断IE或计算机大致描述的预定义条件编译变量:

预定义的条件编译变量
变量 描述
@_win32 当运行在一个win32系统中时返回true, 否则返回 NaN.
@_win16 当运行在一个win16系统中时返回true , 否则返回 NaN.
@_mac 当运行在一个Apple的Macintosh系统中时返回 true , 否则返回 NaN.
@_alpha 当运行于DEC aplha处理器上时返回true ,否则返回 NaN.
@_x86 当运行于一个Intel处理上时返回true ,否则返回 NaN.
@_mc680x0 运行于Motorola 680x0处理器上时 true , 否则返回 NaN.
@_PowerPC 运行于Motorola PowerPC处理器上时 true , 否则返回 NaN.
@_jscript 永远返回 true.
@_jscript_build JScript脚本引擎编译次数.
@_jscript_version Jscript版本,以主要版本.次要版本格式展现. IE4 支持JScript 3.xIE5.x 支持 JScript  5.5-IE6 支持 JScript 5.6在JScript.net,这个版本数为7.x.
@_debug 如果编译于debug模式则返回 true ,否则返回false.
@_fast 如果编译于fast模式则返回 true ,否则返回false.

在大多数情况下,你也许只需要使用@_win@jscript_build:

Language:javascript, parsed in: 0.001 seconds, using GeSHi 1.0.7.12
  1. /*@cc_on
  2.    @if (@_win32)
  3.       document.write("OS is 32-bit. Browser is IE.");
  4.    @else
  5.       document.write("OS is NOT 32-bit. Browser is IE.");
  6.    @end
  7. @*/
  8.  

用户自定义变量

你也可以在条件编译块中定义你自己的变量,语法如下:

Language:javascript, parsed in: 0.001 seconds, using GeSHi 1.0.7.12
  1. @set @varname = term
  2.  

在条件编译中,数字布尔类型的变量可以使用,但字符型无法使用。比如:

Language:javascript, parsed in: 0.002 seconds, using GeSHi 1.0.7.12
  1. @set @myvar1 = 35
  2. @set @myvar3 = @_jscript_version
  3.  

在条件编译逻辑中能够使用标准的运算符:

  • ! ~
  • * / %
  • + -
  • << >> >>>
  • < <= > >=
  • == != === !==
  • & ^ |
  • && |

你能够通过判断是否返回NaN来确定是否定义了一个用户自定义变量:

Language:javascript, parsed in: 0.002 seconds, using GeSHi 1.0.7.12
  1. @if (@newVar != @newVar)
  2. //该变量未定义
  3.  

由于NaN是唯一一个不等于其自身的值,所以这段脚本能够正常运行。

条件编译示例--try catch语句

在教程的开始,我曾经提及条件编译如何由于在一些Ajax的JavaScript中的出现而显示出它值得自夸的一面。现在我要告诉你我所指的内容。一个Ajax脚本通常包含一个中心函数用于判断浏览器(ie、ff等)对产生异步请求对象的支持:

典型的ajax函数:

Language:javascript, parsed in: 0.020 seconds, using GeSHi 1.0.7.12
  1. function HttpRequest(url, parameters){
  2. var pageRequest = false //variable to hold ajax object
  3.    if (window.XMLHttpRequest) // if Mozilla, Safari etc
  4.       pageRequest = new XMLHttpRequest()
  5.    else if (window.ActiveXObject){ // if IE
  6.       try {
  7.       pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
  8.       }
  9.       catch (e){
  10.          try{
  11.          pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
  12.          }
  13.          catch (e){}
  14.       }
  15.    }
  16.    else
  17.    return false
  18. }
  19.  

许多人认为try/catch语句能够顺利的测试Ajax支持,很不幸,这不是真的。那些不支持throw/catch的浏览器,比如IE 4.x,实际上会阻塞上面这段代码并返回一个错误。为了克服这个问题,条件编译能够用来粗行减一个真正跨浏览器的友好的Ajax处理函数:

真正的跨浏览器函数:

Language:javascript, parsed in: 0.008 seconds, using GeSHi 1.0.7.12
  1. function HttpRequest(url, parameters){
  2. var pageRequest = false //variable to hold ajax object
  3. /*@cc_on
  4.    @if (@_jscript_version >= 5)
  5.       try {
  6.       pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
  7.       }
  8.       catch (e){
  9.          try {
  10.          pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
  11.          }
  12.          catch (e2){
  13.          pageRequest = false
  14.          }
  15.       }
  16.    @end
  17. @*/
  18.  
  19. if (!pageRequest && typeof XMLHttpRequest != 'undefined')
  20. pageRequest = new XMLHttpRequest()
  21. }
  22.  

使用条件编译,完整的try/catch块只用于IE5+, 其余的浏览器,比如IE4或非IE浏览器则试着破译它(dicipher it...这个dicipher是什么?“破译”这个解释是google到的,个人感觉翻译成“忽略”似乎更好?)。明显的Firefox会继续并使用XMLHttpRequest代替。现在你就得到了它--一个真正跨浏览器的ajax函数!(子乌注:在我翻译的另外一篇文章中,可以看到这个函数更全面的写法。

Javascript 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
javascript数组排序汇总
Jul 07 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 #Javascript
彪哥1.1(智能表格)提供下载
Sep 07 #Javascript
日期函数扩展类Ver0.1.1
Sep 07 #Javascript
js脚本学习 比较实用的基础
Sep 07 #Javascript
prototype 的说明 js类
Sep 07 #Javascript
你的编程语言可以这样做吗?
Sep 07 #Javascript
音乐播放用的的几个函数
Sep 07 #Javascript
You might like
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
判断复选框是否被选中的两种方法
2014/06/04 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
区分python中的进程与线程
2020/08/13 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
烹调加工管理制度
2014/02/04 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技