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

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quá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下運行(2) 解決方法：改用 document.formName.elements"elementName"(3) 其它參見22. 集合類對象問題(1) 現(xiàn)有問題：現(xiàn)有代碼

5、中許多集合類對象取用時使用()，IE能接受，MF不能。(2) 解決方法：改用作為下標運算。如：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上運行(2) 解決方法：MF

6、的event只能在事件發(fā)生的現(xiàn)場使用，此問題暫無法解決?？梢赃@樣變通：原代碼(可在IE中運行)：on click=""/><script la nguage="javascript">fun cti on gotoSubmit() / usealert(wi ndow.eve nt);wi ndow.eve nt</script>新代碼(可在IE和MF中運行)：提交”<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中運行，但不會出錯。所以，這種方案tpl部分仍與老代碼兼容。4. HTML對象的id 作為對象名的問題(1) 現(xiàn)有問題在I

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

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

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

11、 n ame="frameName" />那么ie可以通過id或者name訪問這個frame對應的window對象而mf只可以通過 name來訪問這個frame對應的window對象例如如果上述frame標簽寫在最上層的 window里面的htm里面，那么可以這樣訪問mf： 只能這樣 window.top.frameName 來訪問這個 window對象另外，在 mf 和 ie 中都可以使用 window.top.document.getElementByld("frameld")來訪問frame標簽并且可以通過 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/目錄下面的測試-adun 2004.12.09修改9. 在mf中，自己定義的屬性必須getAttribute() 取得10. 在 mf 中沒有parentElement parem

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

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

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

16、方法：使用tagName，但應檢測其是否為空。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é)點6, 無 outerHTML 屬性7, 事件局部變量e替代事件全局變量 event8, e.button 鍵值有別于event.button,只有3個鍵值而無組合鍵值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等嚴格檢查"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)欄默認不可修改,需調(diào)整ff設置18, 內(nèi)置繪圖功能以 canvas或者SVG替代vml19, 代碼出錯時經(jīng)常不報錯(想來也是ff的無奈之舉吧，如果每個ie獨有的表達方式換在它 里面都報錯的話，怕是報都報不過來吧)20, 對緩存的清理非常不好注：標明“ie適用”者為通用性建議寫法,未標明者在ie里不適用。以下所有IE指IE6.0驗證是否是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()在這之前已被實現(xiàn)firefoxdocume nt.body .onl oad = inject();有人說標準是：docume nt.body .onl oad=new Fun cti on ('inject。')；在 firefox 無法取

21、得 event.srcElement通過其他方式傳遞對象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ù)是很麻煩的事因為FireFox并沒有window.event.如果要得到event對象，就必須要聲明時間處理函數(shù)的第一個參數(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/處理事件.對于簡單的程序，這不算麻煩但對于一些復雜的程序，某寫函數(shù)根本就不是直接與事件掛鉤的.如果要把event傳進該參數(shù),那么所有的方法都要把event傳來傳去.這簡直就是噩夢.下面介紹一個解決這個麻煩事的方法，與原理.JScript中，函數(shù)的調(diào)用是有一個func.caller這個屬性的.例如fun ctio n A()B()；fun ctio n B()alert(B.caller);如果B被A調(diào)用，那么B.caller 就是A另外，函數(shù)有一個a

24、rguments屬性.這個屬性可以遍歷函數(shù)當前執(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ù)這兩個屬性,我們可以得到第一個函數(shù)的eve nt對象：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對象if(arg0.c on structor=E

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

27、以 handle_click.arguments0就是 event !針對上面的知識，我們可以結(jié)合prototype._defineGetter_來實現(xiàn)window.eventFireFox下的實現(xiàn)：下面給出一個簡單的代碼.有興趣的可以補充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等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論