IE中jscript/javascript的條件編譯
IE中jscript/javascript的條件編譯
- 作者:JavaScript Kit
- 譯者:子烏(Sheneyan)
- 翻譯日期:2006-02-12
- 英文原文:Conditional Compilation of JScript/ JavaScript in IE
- 版權(quán):翻譯未經(jīng)過javascript kit同意，我只對我所翻譯的中文部分負(fù)責(zé)。版權(quán)歸原作者所有。
條件編譯概述
在IE中，有一個(gè)鮮為人知的功能叫做條件編譯。自從IE4開始支持這個(gè)功能，它由于在一些Ajax相關(guān)的javascript腳本中出現(xiàn)而受到一些關(guān)注。條件編譯作為一種獨(dú)立形式的對象判斷，使得IE可以根據(jù)預(yù)定義或用戶定義的條件來決定你的jscript或javascript代碼特定部分是否編譯。也可以把它看成是你的代碼的條件注釋,使你的代碼能夠在非IE瀏覽上也順利運(yùn)行。
語法概述
通過在你的腳本中使用@cc_on來激活條件編譯，或者直接使用@if或者@set等等作為CC邏輯中一部分的句子來激活它。這里是一個(gè)示范例子：
-
<script type="text/javascript">
-
-
/*@cc_on
-
document.write("JScript 版本: " + @_jscript_version + ".<br>");
-
/*@if (@_jscript_version >= 5)
-
document.write("JScript 版本 5.0+.<br \/>");
-
document.write("只有當(dāng)瀏覽器支持JScript5+的時(shí)候你才能看到這些文字.<br>");
-
@else @*/
-
document.write("當(dāng)你使用其他瀏覽器(比如: Firefox, IE 4.x 之類)的時(shí)候看到這行文字<br>");
-
/*@end
-
@*/
-
-
</script>
-
例子:
JScript 版本: 5.6.JScript 版本 5.0+.
只有當(dāng)瀏覽器支持JScript5+的時(shí)候你才能看到這些文字。
如果你使用IE（任何版本），你應(yīng)該能夠看到第一個(gè)document.write()的輸出，如果是IE5+,接下來的兩個(gè)document.write()你也能夠看見（因?yàn)閺腎E5開始支持JScript 5）。最后一個(gè)document.write()方法是為了其他非IE5+瀏覽器服務(wù)的，無論是Firefox，opera，IE4,或者什么別的。條件編譯依賴于類似在條件注釋中使用的注釋標(biāo)簽，以確保它在所有瀏覽器中都能工作順暢。
當(dāng)使用條件編譯的時(shí)候，最好先通過@cc_on語句來激活它，只有這樣你才能在你的腳本中包含注釋標(biāo)簽以保證瀏覽器兼容，、就好像上面例子中所顯示的那樣。(子烏注：這句英文我翻譯的不是很順...看起來似乎與上面的句子矛盾)
@if, @elif, @else,@end 語句
在這個(gè)奇怪的開場白之后，這里是一些用于條件便于的條件語句：
- @if
- @elif
- @else
- @end
現(xiàn)在讓我們看一些“古怪”的例子。
if else 邏輯 (排除IE外的瀏覽器)
-
/*@cc_on
-
@if (@_win32)
-
document.write("操作系統(tǒng)是32位windows。瀏覽器是IE。");
-
@else
-
document.write("操作系統(tǒng)不是32位windows。瀏覽器是IE。");
-
@end
-
@*/
-
這是一段完整的腳本，只被ie瀏覽器所識別并忽略其他所有瀏覽器，這段腳本在不同的操作系統(tǒng)上將顯示不同的內(nèi)容。對比一下下面這個(gè)例子……
if else 邏輯2 (包含其他瀏覽器)
-
/*@cc_on
-
/*@if (@_win32)
-
document.write("操作系統(tǒng)是32位windows。瀏覽器是IE。");
-
@else @*/
-
document.write("瀏覽器不是IE (如: Firefox)或者瀏覽器不是在32位windows下的IE。");
-
/*@end
-
@*/
-
熟練使用注釋標(biāo)簽，這個(gè)例子中的else部分能夠包含所有的非ie瀏覽器（如firefox），以及非32位windows下的IE。努力的研究這段注釋，直到你腦袋發(fā)昏，你就會明白這個(gè)邏輯了:)
if, elseif, else邏輯 (排除IE外的瀏覽器)
繼續(xù)吧，可以看全部內(nèi)容了：
-
/*@cc_on
-
@if (@_jscript_version >= 5)
-
document.write("IE Browser that supports JScript 5+");
-
@elif (@_jscript_version >= 4)
-
document.write("IE Browser that supports JScript 4+");
-
@else
-
document.write("Very old IE Browser");
-
@end
-
@*/
-
if, elseif, else 邏輯2(包含其他瀏覽器)
-
/*@cc_on
-
/*@if (@_jscript_version >= 5)
-
document.write("IE Browser that supports JScript 5+");
-
@elif (@_jscript_version >= 4)
-
document.write("IE Browser that supports JScript 4+");
-
@else @*/
-
document.write("Non IE Browser (one that doesn't support JScript)");
-
/*@end
-
@*/
-
全面的處理。在這最后一個(gè)例子中，最后一個(gè)else語句包含了所有非IE瀏覽器。
條件編譯變量
在之前一部分中你看到了一些奇怪變量比如@_win32。這是一些你能夠用來判斷IE或計(jì)算機(jī)大致描述的預(yù)定義條件編譯變量：
| 變量 | 描述 |
|---|---|
| @_win32 | 當(dāng)運(yùn)行在一個(gè)win32系統(tǒng)中時(shí)返回true, 否則返回 NaN. |
| @_win16 | 當(dāng)運(yùn)行在一個(gè)win16系統(tǒng)中時(shí)返回true , 否則返回 NaN. |
| @_mac | 當(dāng)運(yùn)行在一個(gè)Apple的Macintosh系統(tǒng)中時(shí)返回 true , 否則返回 NaN. |
| @_alpha | 當(dāng)運(yùn)行于DEC aplha處理器上時(shí)返回true ,否則返回 NaN. |
| @_x86 | 當(dāng)運(yùn)行于一個(gè)Intel處理上時(shí)返回true ,否則返回 NaN. |
| @_mc680x0 | 運(yùn)行于Motorola 680x0處理器上時(shí) true , 否則返回 NaN. |
| @_PowerPC | 運(yùn)行于Motorola PowerPC處理器上時(shí) true , 否則返回 NaN. |
| @_jscript | 永遠(yuǎn)返回 true. |
| @_jscript_build | JScript腳本引擎編譯次數(shù). |
| @_jscript_version | Jscript版本，以主要版本.次要版本格式展現(xiàn).
IE4 支持JScript 3.x |
| @_debug | 如果編譯于debug模式則返回 true ,否則返回false. |
| @_fast | 如果編譯于fast模式則返回 true ,否則返回false. |
在大多數(shù)情況下，你也許只需要使用@_win和@jscript_build:
-
/*@cc_on
-
@if (@_win32)
-
document.write("OS is 32-bit. Browser is IE.");
-
@else
-
document.write("OS is NOT 32-bit. Browser is IE.");
-
@end
-
@*/
-
用戶自定義變量
你也可以在條件編譯塊中定義你自己的變量，語法如下：
-
@set @varname = term
-
在條件編譯中，數(shù)字與布爾類型的變量可以使用，但字符型無法使用。比如：
-
@set @myvar1 = 35
-
@set @myvar3 = @_jscript_version
-
在條件編譯邏輯中能夠使用標(biāo)準(zhǔn)的運(yùn)算符：
- ! ~
- * / %
- + -
- << >> >>>
- < <= > >=
- == != === !==
- & ^ |
- && |
你能夠通過判斷是否返回NaN來確定是否定義了一個(gè)用戶自定義變量:
-
@if (@newVar != @newVar)
-
//該變量未定義
-
由于NaN是唯一一個(gè)不等于其自身的值，所以這段腳本能夠正常運(yùn)行。
條件編譯示例－－try catch語句
在教程的開始，我曾經(jīng)提及條件編譯如何由于在一些Ajax的JavaScript中的出現(xiàn)而顯示出它值得自夸的一面。現(xiàn)在我要告訴你我所指的內(nèi)容。一個(gè)Ajax腳本通常包含一個(gè)中心函數(shù)用于判斷瀏覽器（ie、ff等）對產(chǎn)生異步請求對象的支持:
典型的ajax函數(shù):
-
function HttpRequest(url, parameters){
-
var pageRequest = false //variable to hold ajax object
-
if (window.XMLHttpRequest) // if Mozilla, Safari etc
-
pageRequest = new XMLHttpRequest()
-
else if (window.ActiveXObject){ // if IE
-
try {
-
pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
-
}
-
catch (e){
-
try{
-
pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
-
}
-
catch (e){}
-
}
-
}
-
else
-
return false
-
}
-
許多人認(rèn)為try/catch語句能夠順利的測試Ajax支持，很不幸，這不是真的。那些不支持throw/catch的瀏覽器，比如IE 4.x，實(shí)際上會阻塞上面這段代碼并返回一個(gè)錯(cuò)誤。為了克服這個(gè)問題，條件編譯能夠用來粗行減一個(gè)真正跨瀏覽器的友好的Ajax處理函數(shù):
真正的跨瀏覽器函數(shù):
-
function HttpRequest(url, parameters){
-
var pageRequest = false //variable to hold ajax object
-
/*@cc_on
-
@if (@_jscript_version >= 5)
-
try {
-
pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
-
}
-
catch (e){
-
try {
-
pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
-
}
-
catch (e2){
-
pageRequest = false
-
}
-
}
-
@end
-
@*/
-
-
if (!pageRequest && typeof XMLHttpRequest != 'undefined')
-
pageRequest = new XMLHttpRequest()
-
}
-
使用條件編譯，完整的try/catch塊只用于IE5+, 其余的瀏覽器，比如IE4或非IE瀏覽器則試著破譯它(dicipher it...這個(gè)dicipher是什么？“破譯”這個(gè)解釋是google到的,個(gè)人感覺翻譯成“忽略”似乎更好？)。明顯的Firefox會繼續(xù)并使用XMLHttpRequest代替?，F(xiàn)在你就得到了它－－一個(gè)真正跨瀏覽器的ajax函數(shù)?。?span id="vvxyksv9kd" class=notes>子烏注：在我翻譯的另外一篇文章中，可以看到這個(gè)函數(shù)更全面的寫法。）
相關(guān)文章
這篇文章主要介紹了微信小程序日歷彈窗選擇器，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
javascript中時(shí)區(qū)知識的整理UTC GMT問題
這篇文章主要介紹了javascript中時(shí)區(qū)知識的整理UTC GMT問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了css與javascript跨瀏覽器兼容性,包括常見的css兼容性問題與javascript兼容性問題,以及IE與Firefox等常用瀏覽器的兼容性分析,需要的朋友可以參考下2014-09-09
這篇文章主要介紹了JavaScript私有變量,結(jié)合實(shí)例形式分析了javascript私有變量的常見定義及訪問方法,需要的朋友可以參考下2019-01-01
typescript使用 ?. ?? ??= 運(yùn)算符的方法步驟
本文主要介紹了typescript使用 ?. ?? ??= 運(yùn)算符的方法步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
這篇文章主要給大家介紹了關(guān)于如何檢測JavaScript中死循環(huán)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
BootStrap模態(tài)框閃退問題實(shí)例代碼詳解
這篇文章主要介紹了BootStrap模態(tài)框閃退問題實(shí)例代碼詳解,需要的朋友可以參考下2018-12-12
javascript用DIV模擬彈出窗口_窗體滾動(dòng)跟隨
可滾動(dòng)跟隨彈出框效果代碼,非常實(shí)用的應(yīng)用于網(wǎng)絡(luò)廣告2008-09-09
微信小程序movable view移動(dòng)圖片和雙指縮放實(shí)例代碼
movable-area是微信小程序的新組件，可以用來移動(dòng)視圖區(qū)域movable-view。這篇文章主要介紹了微信小程序movable view移動(dòng)圖片和雙指縮放實(shí)例代碼,需要的朋友可以參考下2017-08-08
微信小程序scroll-view實(shí)現(xiàn)左右聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實(shí)現(xiàn)左右聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09