1.window.event問題
說明:window.event只能在IE下運行,而不能在Firefox下運行,這是因為Firefox的event只能在事件發(fā)生的現(xiàn)場使用.
解決方法: 在觸發(fā)事件的函數(shù)上使用(aEvent)參數(shù),例如下面的
- objNode.onmouseover=function(aEvent){
- var myEvent = window.event ? window.event.srcElement : aEvent.target;
- //執(zhí)行其他動作
- }
(每次用事件之前Firefox都需要用getEvent()獲取一下,否則就是空)
2.event.x與event.y問題
說明:IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;Firefox下,even對象有pageX,pageY屬性,但是沒有x,y屬性.
解決方法:使用mX(mX = event.x ? event.x : event.pageX;)
來代替IE下的event.x或者Firefox下的event.pageX
.
3.event.srcElement問題
說明:IE下,even對象有srcElement屬性,但是沒有target屬性;Firefox下,even對象有target屬性,但是沒有srcElement屬性.
解決方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)
來代替IE下的event.srcElement
或者Firefox下的event.target
.
4.window.location.href問題
說明:IE或者Firefox2.0.x下,可以使用window.location
或window.location.href
;Firefox1.5.x下,只能使用window.location
.
解決方法:使用window.location
來代替window.location.href
.
5.模態(tài)和非模態(tài)窗口問題
說明:IE下,可以通過showModalDialog
和showModelessDialog
打開模態(tài)和非模態(tài)窗口;Firefox下則不能.
解決方法:直接使用window.open(pageURL,name,parameters)
方式打開新窗口。
如果需要將子窗口中的參數(shù)傳遞回父窗口,可以在子窗口中使用window.opener來訪問父窗口. 例如:
- var parWin = window.opener;
- parWin.document.getElementById("itemID").value = "some value";
6.frame問題
以下面的frame為例:<frame src="xxx.html" id="frameId" name="frameName" />
(1)訪問frame對象:
IE:使用window.frameId或者window.frameName來訪問這個frame對象.
Firefox:只能使用window.frameName來訪問這個frame對象.
另外,在IE和Firefox中都可以使用window.document.getElementById("frameId")來訪問這個frame對象.
(2)切換frame內(nèi)容:
在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"來切換frame的內(nèi)容.
如果需要將frame中的參數(shù)傳回父窗口,可以在frame中使用parent來訪問父窗口。例如:parent.document.form1.filename.value="some value";
7.body問題
Firefox的body在body標簽沒有被瀏覽器完全讀入之前就存在;而IE的body則必須在body標簽被瀏覽器完全讀入之后才存在.
例如:
Firefox:
程序代碼
- <body>
- <script type="text/javascript">
- document.body.onclick = function(evt){
- evtevt = evt || window.event;
- alert(evt);
- }
- </script>
</body>
IE&Firefox:
程序代碼
- <body>
- </body>
- <script type="text/javascript">
- document.body.onclick = function(evt){
- evtevt = evt || window.event;
- alert(evt);
- }
- </script>
8.nodeName 和 tagName 問題
問題:在MF,IE中,所有節(jié)點均有 nodeName 值,但 textNode 沒有 tagName 值。
解決方法:使用 tagName,但應檢測其是否為undefined。
9.url encoding
問題:js中如果書寫url就直接寫&不要寫&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx'
;
frm.action = url
那么很有可能url不會被正常顯示以至于參數(shù)沒有正確的傳到服務器,一般會服務器報錯參數(shù)沒有找到;當然如果是在tpl中例外,因為tpl中符合xml規(guī)范,要求&書寫為&
一般MF無法識別js中的&
10.children 與 childNodes,removeNode
問題一:在MF中沒有 parentElement parement.children 而用 parentNode parentNode.childNodes
問題二:childNodes的下標的含義在IE和MF中不同,MF使用DOM規(guī)范,childNodes中會插入空白文本節(jié)點。
問題三:一般可以通過node.getElementsByTagName()
來回避這個問題。當html中節(jié)點缺失時,IE和MF對parentNode的解釋不同,例如
<form>
<table>
</table>
</form>
MF中input.parentNode的值為form, 而IE中input.parentNode的值為空節(jié)點
問題四:MF中節(jié)點沒有removeNode方法,必須使用如下方法 node.parentNode.removeChild(node)
11.HTML 對象的 id 作為對象名的問題
(1)現(xiàn)有問題
在 IE 中,HTML 對象的 ID 可以作為 document 的下屬對象變量名直接使用。在 ff 中不能。
(2)解決方法
用 getElementById("idName")
代替 idName
作為對象變量使用。
12.在ff中沒有 parentElement parement.children
而用 parentNode parentNode.childNodes
childNodes的下標的含義在IE和ff中不同,ff使用DOM規(guī)范,childNodes中會插入空白文本節(jié)點。
一般可以通過node.getElementsByTagName()來回避這個問題。
當html中節(jié)點缺失時,IE和ff對parentNode的解釋不同,例如
- <form>
- <table>
- <input/>
- </table>
- </form>
ff中input.parentNode的值為form, 而IE中input.parentNode
的值為空節(jié)點
ff中節(jié)點沒有removeNode方法,必須使用如下方法 node.parentNode.removeChild(node)
13.DOM 數(shù)據(jù)島的問題
(1)現(xiàn)有問題
在IE中, <xml>標簽具有特殊意義, 可以內(nèi)含XML DOM, 并能實現(xiàn)與HTML組件的數(shù)據(jù) 綁定. 在MF中,<xml>則僅僅是一個未知的標記而已. 另外, 對 IE 來說, <xml>實際意味著這里是一個ActiveX對象, 但它卻掛在HTML本 身的DOM樹下作為一個節(jié)點, 因而會對DOM樹的遍歷造成嚴重影響.
(2)解決方法
IE的數(shù)據(jù)綁定機制是可以用JS來模擬的, 但是太麻煩, 建議不使用數(shù)據(jù)綁定機制或者 尋找實現(xiàn)這種模擬的庫來做. 我們只討論如何實現(xiàn)DOM的兼容. 在MF中無論已知的HTML標記還是其它符合XML規(guī)范的標記, 都是用統(tǒng)一的DOM樹來處理的, 因此, MF事實上完全可以使用DOM數(shù)據(jù)島, 但與IE小小的不同在于: 在IE中<xml> 是個 DOM document, 而在MF只是 DOM node. 這個差別通常不足為患. 但是有一個小小的細節(jié), 為了兼容HTML相當隨意的語法, MF無法識別簡寫的空標記. 如: <xml id="xx"><book><title>xxxx</title><content/><index/></book></xml>, 這其中<content/>和<index/>是簡寫形式的, 會使MF無法識別, 應當寫成: <content></content><index></index> 不過, 我懷疑如果用XHTML, 可能就沒有這種問題. 但我還沒有試過. 對于IE中<xml>干擾HTML的DOM結(jié)構(gòu)問題, 我現(xiàn)在的方法是處理完畢后把它從HTML的 DOM中刪除. 不知道還有沒有更好的解.
14.firefox與IE(parentElement)的父元素的區(qū)別
IE:obj.parentElement
firefox:obj.parentNode
解決方法: 因為firefox與IE都支持DOM,因此使用obj.parentNode是不錯選擇.
15.FireFox中類似 obj.style.height = imgObj.height 的語句無效
解決方法:obj.style.height = imgObj.height + 'px';
16. ie,firefox以及其它瀏覽器對于 table 標簽的操作都各不相同
在ie中不允許對table和tr的innerHTML賦值,使用js增加一個tr時,使用appendChile方法也不管用。
解決方法:
//向table追加一個空行:
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);
17ie支持document.all 而firefox 不支持
改用下面三個tag的其中一個來代替document.all
getElementsByTagName("tagName") 可以得到得到所有標簽元素的集合
getElementById("idName") 可以按id得到某一元素
getElementsByName("Name") 可以得到按name屬性得到某一元素
18.firefox 中使用innerHTML 的方法
document.all.online.innerHTML; //這種方法在IE中可以使用,但不是標準方法
document.getElementById("online").innerHTML; //這樣firefox就能使用innerHTML了
19.對事件處理函數(shù)的重寫
解決:(例):如對document的onclick()重寫,統(tǒng)一使用document.onclick = function(){…}
20.屏蔽Form提交事件
event.returnValue=false;// for IE
evt.preventDefault();//for firefox
21.獲取事件源
var source=event.srcElement //IE
var source=event.target //firefox
22.添加事件兼容寫法
function addEvent(oElement,sEvent,func){
if (oElement.attachEvent){
oElement.attachEvent(sEvent,func);
}
else{
sEventsEvent=sEvent.substring(2,sEvent.length);
oElement.addEventListener(sEvent,func,false);
}
}
解決方法:addEvent(window,"onload",Start);
23.長度:FireFox長度必須加“px”,IE無所謂
24.XmlHttp
在IE中,XmlHttp.send(content)方法的content可以為空,而firefox則不能為空,應該用send(" "),否則會出現(xiàn)錯誤
25.事件追加方法 attachEvent(IE)/detachEvent;addEventListener( Mozilla, Netscape, Firefox)/removeEventListener
又或者直接用obj.onmouseover=func;
26.Firefox中不存在 Event時間,必須通過object本身去取
在Firefox獲取當前物件的坐標方法:
- document.onmousemove = Inti_move;
- function Inti_move(ert)
- {
- x=ert.pageX;
- }
27.
- function getChild(o) {
- var allChild = o.childNodes;
- var tmpArray = new Array();
- for (var i=0;i<allChild.length;i++) {
- if (allChild[i].nodeType == 1) {
- tmpArray.push(i);
- }
- }
- var o = tmpArray;
- return o;
- }
如果某個元素的子節(jié)點是元素的話就保留push到一個新數(shù)組里
這樣子FF可以兼容了