1.window.event問題
說明:window.event只能在IE下運行,而不能在Firefox下運行,這是因為Firefox的event只能在事件發生的現場使用.
解決方法: 在觸發事件的函數上使用(aEvent)參數，例如下面的
- objNode.onmouseover=function(aEvent){
- var myEvent = window.event ? window.event.srcElement : aEvent.target;
- //執行其他動作
- }
（每次用事件之前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.模態和非模態窗口問題
說明:IE下,可以通過showModalDialog和showModelessDialog打開模態和非模態窗口;Firefox下則不能.
解決方法:直接使用window.open(pageURL,name,parameters)方式打開新窗口。
如果需要將子窗口中的參數傳遞回父窗口,可以在子窗口中使用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內容:
在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"來切換frame的內容.
如果需要將frame中的參數傳回父窗口，可以在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中，所有節點均有 nodeName 值，但 textNode 沒有 tagName 值。
解決方法：使用 tagName，但應檢測其是否為undefined。
9.url encoding
問題：js中如果書寫url就直接寫&不要寫&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url那么很有可能url不會被正常顯示以至于參數沒有正確的傳到服務器，一般會服務器報錯參數沒有找到；當然如果是在tpl中例外，因為tpl中符合xml規范，要求&書寫為&
一般MF無法識別js中的&
10.children 與 childNodes，removeNode
問題一：在MF中沒有 parentElement parement.children 而用 parentNode parentNode.childNodes
問題二：childNodes的下標的含義在IE和MF中不同，MF使用DOM規范，childNodes中會插入空白文本節點。
問題三：一般可以通過node.getElementsByTagName()來回避這個問題。當html中節點缺失時，IE和MF對parentNode的解釋不同，例如
<form>
<table>
</table>
</form>
MF中input.parentNode的值為form, 而IE中input.parentNode的值為空節點
問題四：MF中節點沒有removeNode方法，必須使用如下方法 node.parentNode.removeChild(node)
11.HTML 對象的 id 作為對象名的問題
(1)現有問題
在 IE 中，HTML 對象的 ID 可以作為 document 的下屬對象變量名直接使用。在 ff 中不能。
(2)解決方法
用 getElementById("idName") 代替 idName 作為對象變量使用。
12.在ff中沒有 parentElement parement.children 而用 parentNode parentNode.childNodes
childNodes的下標的含義在IE和ff中不同，ff使用DOM規范，childNodes中會插入空白文本節點。
一般可以通過node.getElementsByTagName()來回避這個問題。
當html中節點缺失時，IE和ff對parentNode的解釋不同，例如
- <form>
- <table>
- <input/>
- </table>
- </form>
ff中input.parentNode的值為form, 而IE中input.parentNode的值為空節點
ff中節點沒有removeNode方法，必須使用如下方法 node.parentNode.removeChild(node)
13.DOM 數據島的問題
(1)現有問題
在IE中, <xml>標簽具有特殊意義, 可以內含XML DOM, 并能實現與HTML組件的數據 綁定. 在MF中,<xml>則僅僅是一個未知的標記而已. 另外, 對 IE 來說, <xml>實際意味著這里是一個ActiveX對象, 但它卻掛在HTML本 身的DOM樹下作為一個節點, 因而會對DOM樹的遍歷造成嚴重影響.
(2)解決方法
IE的數據綁定機制是可以用JS來模擬的, 但是太麻煩, 建議不使用數據綁定機制或者 尋找實現這種模擬的庫來做. 我們只討論如何實現DOM的兼容. 在MF中無論已知的HTML標記還是其它符合XML規范的標記, 都是用統一的DOM樹來處理的, 因此, MF事實上完全可以使用DOM數據島, 但與IE小小的不同在于: 在IE中<xml> 是個 DOM document, 而在MF只是 DOM node. 這個差別通常不足為患. 但是有一個小小的細節, 為了兼容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結構問題, 我現在的方法是處理完畢后把它從HTML的 DOM中刪除. 不知道還有沒有更好的解.
14.firefox與IE(parentElement)的父元素的區別
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.對事件處理函數的重寫
解決：（例）:如對document的onclick()重寫，統一使用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(" ")，否則會出現錯誤
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;
- }
如果某個元素的子節點是元素的話就保留push到一個新數組里
這樣子FF可以兼容了
400 186 1886
