漫談firefx與IE兼容_第1頁(yè)
漫談firefx與IE兼容_第2頁(yè)
漫談firefx與IE兼容_第3頁(yè)
免費(fèi)預(yù)覽已結(jié)束，剩余15頁(yè)可下載查看

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(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)頁(yè)可見(jiàn)區(qū)域?qū)挘?quot;+ docume nt.body.clie ntWidth;s += "r n網(wǎng)頁(yè)可見(jiàn)區(qū)域咼："+ docume nt.body.clie ntHeight;s += "r n網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?quot;+ docume nt.body.offsetWidth +"(s += "r n網(wǎng)頁(yè)可見(jiàn)區(qū)域咼："+ docume nt.body.offsetHeight +"(s +

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

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問(wèn)題現(xiàn)有問(wèn)題：現(xiàn)有代碼中存在許多 docume nt.formName.item("itemName")這樣的語(yǔ)句，不能在MF下運(yùn)行(2) 解決方法：改用 document.formName.elements"elementName"(3) 其它參見(jiàn)22. 集合類(lèi)對(duì)象問(wèn)題(1) 現(xiàn)有問(wèn)題：現(xiàn)有代碼

5、中許多集合類(lèi)對(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)有問(wèn)題：使用window.event 無(wú)法在MF上運(yùn)行(2) 解決方法：MF

6、的event只能在事件發(fā)生的現(xiàn)場(chǎng)使用，此問(wèn)題暫無(wú)法解決。可以這樣變通：原代碼(可在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) 用沒(méi)有給參數(shù))，則仍然只能在IE中運(yùn)行，但不會(huì)出錯(cuò)。所以，這種方案tpl部分仍與老代碼兼容。4. HTML對(duì)象的id 作為對(duì)象名的問(wèn)題(1) 現(xiàn)有問(wèn)題在I

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

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

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

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

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

13、ent.children而用pare ntNode pare ntNode.childNodeschildNodes 的下標(biāo)的含義在 IE和MF中不同，MF使用DOM規(guī)范，childNodes中會(huì) 插入空白文本節(jié)點(diǎn)。一般可以通過(guò)n ode.getEleme ntsByTagName()來(lái)回避這個(gè)問(wèn)題。當(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)沒(méi)有removeNode方法，必須使用如下方法no de.pare ntNode.removeChild( no de)11. co nst 問(wèn)題(1) 現(xiàn)有問(wèn)題：在IE 中不能使用 const 關(guān)鍵字。如 const constVar = 32; 在IE中這是語(yǔ) 法錯(cuò)誤。(2) 解決方法：不使用const ，以var代替。12. body 對(duì)象MF的body在body標(biāo)簽沒(méi)有被瀏覽器完全讀入之前就存在，而IE則必須在body完全被讀入之后才存在13. url en cod ing在js中如果書(shū)寫(xiě)url就直接寫(xiě)&不要寫(xiě)&例如var url

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

16、方法：使用tagName，但應(yīng)檢測(cè)其是否為空。15. 元素屬性IE下input.type屬性為只讀，但是 MF下可以修改16. docume nt.getEleme ntsByName()禾口 docume nt.all name的問(wèn)題(1)現(xiàn)有問(wèn)題：div在 IE 中，getElementsByName()、document.allname均不能用來(lái)取得元素(是否還有其它不能取的元素還不知道)。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, 無(wú) outerHTML 屬性7, 事件局部變量e替代事件全局變量 event8, e.button 鍵值有別于event.button,只有3個(gè)鍵值而無(wú)組合鍵值9, 無(wú)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)"無(wú)其它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ò)(想來(lái)也是ff的無(wú)奈之舉吧，如果每個(gè)ie獨(dú)有的表達(dá)方式換在它 里面都報(bào)錯(cuò)的話，怕是報(bào)都報(bào)不過(guò)來(lái)吧)20, 對(duì)緩存的清理非常不好注：標(biāo)明“ie適用”者為通用性建議寫(xiě)法,未標(biāo)明者在ie里不適用。以下所有IE指IE6.0驗(yàn)證是否是IE瀏覽器(來(lái)之于google js)var agt =n

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

21、得 event.srcElement通過(guò)其他方式傳遞對(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);這是來(lái)之在FireFox下編寫(xiě)事件處理函數(shù)是很麻煩的事因?yàn)镕ireFox并沒(méi)有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ù)雜的程序，某寫(xiě)函數(shù)根本就不是直接與事件掛鉤的.如果要把event傳進(jìn)該參數(shù),那么所有的方法都要把event傳來(lái)傳去.這簡(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來(lái)搜索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)用，雖然沒(méi)有定義參數(shù)，但是被調(diào)用時(shí)，第一個(gè)參數(shù)就是event,所

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

最新文檔

評(píng)論

0/150

提交評(píng)論