漫談firefx與IE兼容_第1頁
漫談firefx與IE兼容_第2頁
漫談firefx與IE兼容_第3頁
已閱讀5頁，還剩13頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、firefox 與IE兼容2008-12-05 18:26var s ="" s += "r n網(wǎng)頁可見區(qū)域?qū)挘?quot;+ docume nt.body.clie ntWidth;s += "r n網(wǎng)頁可見區(qū)域咼："+ docume nt.body.clie ntHeight;s += "r n網(wǎng)頁可見區(qū)域?qū)挘?quot;+ docume nt.body.offsetWidth +"(s += "r n網(wǎng)頁可見區(qū)域咼："+ docume nt.body.offsetHeight +"(s +

2、= "r n網(wǎng)頁正文全文寬："+ docume nt.body.scrollWidth;s += "r n網(wǎng)頁正文全文咼："+ docume nt.body.scrollHeight;s += "r n網(wǎng)頁被卷去的高："+ docume nt.body.scrollTop;s += "r n網(wǎng)頁被卷去的左："+ docume nt.body.scrollLeft;s += "r n網(wǎng)頁正文部分上："+ win dow.scree nTop;s += "r n網(wǎng)頁正文部分左："

3、+ win dow.scree nLeft;s += "r n屏幕分辨率的高："+ win dow.scree n. height;s += "r n屏幕分辨率的寬："+ wi ndow.scree n. width;s += "r n屏幕可用工作區(qū)咼度："+ win dow.scree n.availHeight;s += "r n屏幕可用工作區(qū)寬度："+ win dow.scree n.availWidth;<body><SCRIPT LANGUAGE="JavaScript&quo

4、t;>alert(s);包括邊線的寬）"包括邊線的寬）"</SCRIPT>以下以 IE 代替 In ternet Explorer ，以 MF 代替 Mozzila Firefox1. docume nt.form.item問題現(xiàn)有問題：現(xiàn)有代碼中存在許多 docume nt.formName.item("itemName")這樣的語句，不能在MF下運(yùn)行(2) 解決方法：改用 document.formName.elements"elementName"(3) 其它參見22. 集合類對(duì)象問題(1) 現(xiàn)有問題：現(xiàn)有代碼

5、中許多集合類對(duì)象取用時(shí)使用()，IE能接受，MF不能。(2) 解決方法：改用作為下標(biāo)運(yùn)算。如：document.forms("formName")改為docume nt.forms"formName"。又如：docume nt.getEleme ntsByName("i nputName")(1)改為docume nt.getEleme ntsByName("i nputName")1(3) 其它3. win dow.eve nt(1) 現(xiàn)有問題：使用window.event 無法在MF上運(yùn)行(2) 解決方法：MF

6、的event只能在事件發(fā)生的現(xiàn)場(chǎng)使用，此問題暫無法解決?？梢赃@樣變通：原代碼(可在IE中運(yùn)行)：on click=""/><script la nguage="javascript">fun cti on gotoSubmit() / usealert(wi ndow.eve nt);wi ndow.eve nt</script>新代碼(可在IE和MF中運(yùn)行)：提交”<in put type="butt on" n ame="someButt on" value="on

7、 click=""/><script la nguage="javascript">fun cti on gotoSubmit(evt) evt = evt ? evt : (win dow.eve ntwi ndow.eve ntnull);alert(evt);/ use evt</script>此外，如果新代碼中第一行不改，與老代碼一樣的話(即gotoSubmit調(diào) 用沒有給參數(shù))，則仍然只能在IE中運(yùn)行，但不會(huì)出錯(cuò)。所以，這種方案tpl部分仍與老代碼兼容。4. HTML對(duì)象的id 作為對(duì)象名的問題(1) 現(xiàn)有問題在I

8、E 中, HTML對(duì)象的ID 可以作為document的下屬對(duì)象變量名直接 使用。在MF中不能。(2) 解決方法用getElementByld("idName") 代替idName作為對(duì)象變量使用。5. 用idName字符串取得對(duì)象的問題(1) 現(xiàn)有問題在IE中，利用 eval(idName) 可以取得id 為idName的HTML對(duì)象， 在MF中不能。(2) 解決方法用 getEleme ntByld(idName) 代替 eval(idName)。6. 變量名與某HTML對(duì)象id相同的問題(1) 現(xiàn)有問題在MF中，因?yàn)閷?duì)象id 不作為HTML對(duì)象的名稱，所以可以使用與

9、HTML對(duì)象id 相同的變量名，IE中不能。(2) 解決方法在聲明變量時(shí)，一律加上var ，以避免歧義，這樣在IE中亦可正常運(yùn) 行。此外，最好不要取與 HTML對(duì)象id相同的變量名，以減少錯(cuò)誤。(3) 其它參見問題47. eve nt.x與 eve nt.y問題(1) 現(xiàn)有問題在IE中，event對(duì)象有x, y 屬性，MF中沒有。(2) 解決方法在 MF中，與 event.x 等效的是 event.pageX。但 event.pageX IE 中沒 有。故采用event.clientX代替event.x 。在IE中也有這個(gè)變量。event.clientX與event.pageX 有微妙的差別(

10、當(dāng)整個(gè)頁面有滾動(dòng)條的時(shí)候)，不過大多數(shù)時(shí)候是等效的。如果要完全一樣，可以稍麻煩些：mX = even t.x ? even t.x : eve nt.pageX;然后用mX代替event.x(3) 其它event.layerX在IE與MF中都有，具體意義有無差別尚未試驗(yàn)。8. 關(guān)于 frame(1) 現(xiàn)有問題在IE中可以用 window.testFrame 取得該frame， mf中不行(2) 解決方法在frame的使用方面 mf和ie的最主要的區(qū)別是：如果在frame標(biāo)簽中書寫了以下屬性：vframe src="xx.htm" id="frameId"

11、 n ame="frameName" />那么ie可以通過id或者name訪問這個(gè)frame對(duì)應(yīng)的window對(duì)象而mf只可以通過 name來訪問這個(gè)frame對(duì)應(yīng)的window對(duì)象例如如果上述frame標(biāo)簽寫在最上層的 window里面的htm里面，那么可以這樣訪問mf： 只能這樣 window.top.frameName 來訪問這個(gè) window對(duì)象另外，在 mf 和 ie 中都可以使用 window.top.document.getElementByld("frameld")來訪問frame標(biāo)簽并且可以通過 window.top.docume

12、nt.getElementByld("testFrame").src = 'xx.htm'來切換frame的內(nèi)容也都可以通過 window.top.frameName.location = 'xx.htm'來切換 frame 的內(nèi)容關(guān)于frame和window的描述可以參見 bbs的window與frame '文章以及/test/js/test_frame/目錄下面的測(cè)試-adun 2004.12.09修改9. 在mf中，自己定義的屬性必須getAttribute() 取得10. 在 mf 中沒有parentElement parem

13、ent.children而用pare ntNode pare ntNode.childNodeschildNodes 的下標(biāo)的含義在 IE和MF中不同，MF使用DOM規(guī)范，childNodes中會(huì) 插入空白文本節(jié)點(diǎn)。一般可以通過n ode.getEleme ntsByTagName()來回避這個(gè)問題。當(dāng)html中節(jié)點(diǎn)缺失時(shí)，IE和MF對(duì)parentNode的解釋不同，例如<form><table><in put/></table></form>MF 中 input.parentNode 的值為 form, 而 IE 中 input.p

14、arentNode的值為空節(jié)點(diǎn)MF中節(jié)點(diǎn)沒有removeNode方法，必須使用如下方法no de.pare ntNode.removeChild( no de)11. co nst 問題(1) 現(xiàn)有問題：在IE 中不能使用 const 關(guān)鍵字。如 const constVar = 32; 在IE中這是語 法錯(cuò)誤。(2) 解決方法：不使用const ，以var代替。12. body 對(duì)象MF的body在body標(biāo)簽沒有被瀏覽器完全讀入之前就存在，而IE則必須在body完全被讀入之后才存在13. url en cod ing在js中如果書寫url就直接寫&不要寫&例如var url

15、 ='xx.jsp?objectName=xx&o bjectEve nt=xxx：frm.action = url那么很有可能url不會(huì)被正常顯示以至于參數(shù)沒有正確的傳到服務(wù)器一般會(huì)服務(wù)器報(bào)錯(cuò)參數(shù)沒有找到當(dāng)然如果是在tpl中例外，因?yàn)閠pl中符合xml規(guī)范，要求&書寫為&一般MF無法識(shí)別js中的&14. nodeName 和 tagName 問題(1) 現(xiàn)有問題：在MF中，所有節(jié)點(diǎn)均有 nodeName值，但textNode 沒有tagName 值。在IE 中，nodeName的使用好象有問題(具體情況沒有測(cè)試，但我的IE已經(jīng)死了好幾次)。(2) 解決

16、方法：使用tagName，但應(yīng)檢測(cè)其是否為空。15. 元素屬性IE下input.type屬性為只讀，但是 MF下可以修改16. docume nt.getEleme ntsByName()禾口 docume nt.all name的問題(1)現(xiàn)有問題：div在 IE 中，getElementsByName()、document.allname均不能用來取得元素(是否還有其它不能取的元素還不知道)。1, document.getElementByld替代 document.all( ie 適用)2, 集合替代()(ie適用)3, target 替代 srcElement;parentNode替代

17、 parentElement ( parentNode ie 適用)4, no de.pare ntNode.removeChild( no de)替代 removeNode(this) ( ie 適用)5, 有空白文本節(jié)點(diǎn)6, 無 outerHTML 屬性7, 事件局部變量e替代事件全局變量 event8, e.button 鍵值有別于event.button,只有3個(gè)鍵值而無組合鍵值9, 無on drag事件10, DOMMouseScroll 替代 onmousewheel;-e.detail 替代 event.wheelDelta11, addEventListener替代 attac

18、hEvent;removeEventListener替代 detachEvent12,e.preve ntDefault()替代 event.returnValue=false;e.stopPropagation()替代even t.ca ncelBubble=true13,style.top 、style.left等嚴(yán)格檢查"px"單位(加"px" ie 適用)14,style="-moz-opacity:0.9"替代 style="filter:alpha(opacity=90)"無其它filter15,sty

19、le.cursor="po in ter"替代 style.cursor="hand"( ie 適用)16, title替代 alt ( ie 適用)17, 狀態(tài)欄默認(rèn)不可修改,需調(diào)整ff設(shè)置18, 內(nèi)置繪圖功能以 canvas或者SVG替代vml19, 代碼出錯(cuò)時(shí)經(jīng)常不報(bào)錯(cuò)(想來也是ff的無奈之舉吧，如果每個(gè)ie獨(dú)有的表達(dá)方式換在它 里面都報(bào)錯(cuò)的話，怕是報(bào)都報(bào)不過來吧)20, 對(duì)緩存的清理非常不好注：標(biāo)明“ie適用”者為通用性建議寫法,未標(biāo)明者在ie里不適用。以下所有IE指IE6.0驗(yàn)證是否是IE瀏覽器(來之于google js)var agt =n

20、avigator.userAge nt.toLowerCase();var is_ie=(agt. in dexOf("msie")!=-1 && docume nt.all);正式開始事件委托方法IEdocume nt.body .onl oad = inject; /Function inject()在這之前已被實(shí)現(xiàn)firefoxdocume nt.body .onl oad = inject();有人說標(biāo)準(zhǔn)是：docume nt.body .onl oad=new Fun cti on ('inject。')；在 firefox 無法取

21、得 event.srcElement通過其他方式傳遞對(duì)象if(isIE)thistable.attachEve nt("o nm ousedow n",O nClickCha ngeTdBackColor);/thistable.o nm ousedow n=On ClickCha ngeTdBackColor;else/deal firefoxfor(var i=0;i<thistable.rows.le ngth;i+) var rowObj = thistable.rowsi;for( var j=0;j<rowObj.cells .len gth;j+)

22、var cellObj = rowObj.cellsj;cellObj.setAttribute("o nm ousedow n" ,"O nClickCha ngeTdBackColor(this)");alert(rowObj.cells0.tagName);這是來之在FireFox下編寫事件處理函數(shù)是很麻煩的事因?yàn)镕ireFox并沒有window.event.如果要得到event對(duì)象，就必須要聲明時(shí)間處理函數(shù)的第一個(gè)參數(shù)為event.所以為了兼容IE與FireFox, 一般的事件處理方法為：bt n.o nclick=ha ndle_btn_cli

23、ck;fun ctio n han dle_btn_click(evt)if(evt=nu ll)evt=w in dow.eve nt;/IE/處理事件.對(duì)于簡(jiǎn)單的程序，這不算麻煩但對(duì)于一些復(fù)雜的程序，某寫函數(shù)根本就不是直接與事件掛鉤的.如果要把event傳進(jìn)該參數(shù),那么所有的方法都要把event傳來傳去.這簡(jiǎn)直就是噩夢(mèng).下面介紹一個(gè)解決這個(gè)麻煩事的方法，與原理.JScript中，函數(shù)的調(diào)用是有一個(gè)func.caller這個(gè)屬性的.例如fun ctio n A()B()；fun ctio n B()alert(B.caller);如果B被A調(diào)用，那么B.caller 就是A另外，函數(shù)有一個(gè)a

24、rguments屬性.這個(gè)屬性可以遍歷函數(shù)當(dāng)前執(zhí)行的參數(shù)：fun ctio n myalert()var arr=;for(var i=0;iarri=myalert.argume ntsi;alert(arr.joi n("-");alert("hello","world",1,2,3)就能顯示 hello-world-1-2-3根據(jù)這兩個(gè)屬性,我們可以得到第一個(gè)函數(shù)的eve nt對(duì)象：btn.on click=ha ndle_click;fun ctio n han dle_click()showc onten t();fun c

25、tio n showc onten t()var evt=SearchEve nt();被按下if(evt&&evt.shiftKey)/如果是基于事件的調(diào)用，并且shiftwin dow.ope n( global_helpurl);elselocati on .href=global_helpurl;function SearchEve nt()fun c=SearchEve nt.caller;while(fu nc!=n ull)var argO=fun c.argume nts0;if(arg0)如果就是 eve nt對(duì)象if(arg0.c on structor=E

26、ve nt) /return argO;fun c=fu nc.caller;return n ull;這個(gè)例子使用了SearchEve nt來搜索eve nt對(duì)象.其中'Eve nt' 是FireFox 的even t.c on structor .在該例子運(yùn)行時(shí)，SearchEvent.caller就是 showcontent,但是 showcontent.arguments0是空.所以func=func.caller 時(shí),func 變?yōu)?handle_click .handle_click被FireFox 調(diào)用，雖然沒有定義參數(shù)，但是被調(diào)用時(shí)，第一個(gè)參數(shù)就是event,所

27、以 handle_click.arguments0就是 event !針對(duì)上面的知識(shí)，我們可以結(jié)合prototype._defineGetter_來實(shí)現(xiàn)window.eventFireFox下的實(shí)現(xiàn)：下面給出一個(gè)簡(jiǎn)單的代碼.有興趣的可以補(bǔ)充if(wi ndow.addEve ntListe ner)FixPrototypeForGecko();function FixPrototypeForGecko()HTMLEtotype._defineGetter_("ru ntimeStyle",eleme nt_prototype_get_ru n timeS

28、tyle);totype._defineGetter_("eve nt",w in dow_prototype_get_eve nt);Etotype._defineGetter_("srcEleme nt",eve nt_prototype_get_srcEleme nt);fun ctio n eleme nt_prototype_get_ru ntimeStyle()/return style in stead.return this.style;function win dow_prototype_get_eve nt()return SearchEve nt();function even t_prototype_get_srcEleme nt()return this.target;function

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論