bluestar0688 的 js在IE和FF的區(qū)別
js調(diào)試工具推薦 firefox 的 firebug 插件
能夠給js設(shè)置斷點(diǎn)執(zhí)行
能夠運(yùn)行時(shí)修改css樣式
查看dom模型等
☆ IE8 自帶的developer bar也很不錯
☆ 打開firefox所有js警告:
在地址欄里錄入:about:config
雙擊,設(shè)置 javascript option restict 打開為true 能夠看到很多警告,利于糾錯
☆ IE -> firefox javascript類
△ document.all("id") -> document.getElementById("id")
并且控件盡量用id,而不是name標(biāo)識
提示:
如果控件只有name,沒有id, 用getElementById時(shí):
IE:也可以找到對象
FF:返回NULL
△ 獲得form里某個(gè)元素的方法
elForm.elements['name'];
△ 取集合元素時(shí), ie支持 [],() 2種寫法, 但是ff僅支持[],如:
table.rows(5).cells(0)
改為:
table.rows[5].cells[0]
△ 判斷對象是否是object的方法應(yīng)該為
if( typeof 對象變量 == "object")
而不是 if(對象變量 == "[object]")
△ eval(對象名稱) -> document.getElementById
FF支持eval函數(shù)
△ 通過id直接調(diào)用對象
對象id.value = ""
改為
document.getElementById("name").value = ""
△ obj.insertAdjacentElement("beforeBegin",objText);
改為用
obj.parentNode.insertBefore(objText,obj);
△ FF的createElement不支持HTML代碼
用document.write(esHTML);
或者創(chuàng)建元素后再設(shè)置屬性, 對input元素來說,需要先設(shè)置type再加入到dom里
var obj = createElement("input");
obj.type = "checkbox";
var obj2 = document.getElementById("id2");
obj2.parentNode.insertBefore(obj,obj2);
如果是直接插入html代碼,則可以考慮用
createContextualFragment
△ innerText -> textContent
△ 對象名稱中的$不能識別, 建議改為_
objName = "t1$spin"
改為
objName = "t1_spin"
△ FF里設(shè)置Attribute為某個(gè)對象,然后再取出來,這時(shí)候?qū)ο蟮膶傩远紒G失了?
objText.setAttribute("obj",obj);
alert(obj.id) //正確的名字
obj = objText.getAttribute("obj");
alert(obj.id) //null
在IE下沒有問題, FF對setAttribute來說,第2個(gè)參數(shù)都是字符串型的!!!
所以如果第2個(gè)參數(shù)是對象時(shí),相當(dāng)于調(diào)用對象的 toString() 方法了
解決的方法是用下面的調(diào)用方式:
objText.dropdown_select = obj;
obj = objText.dropdown_select
△ className -> class
FF下用class代替IE下的className
由于class是關(guān)鍵字, 所以需要用 setAttribute/getAttribute才行
setAttribute("class","css樣式名稱");
△ 在html里定義的屬性,必須用getAttribute才行
<td id="TD1" isOBJ="true">
獲取時(shí):
document.getElementByID("TD1").isOBJ 總返回 undefined, IE下是可以的
應(yīng)該用:
document.getElementByID("TD1").getAttribute("isOBJ")
△ FF里select控件不再是:總是在頂端顯示
所以可能需要設(shè)置控件的zIndex
IE里覆蓋select控件的方法是, 用ifame
△ 對于if ( vars == undefined ) 下面的值用于判斷是等同的
undefined
null
false
0
△ 如果FF調(diào)用obj.focus(); 報(bào)錯,請嘗試改為:
window.setTimeout( function(){ obj.focus(); }, 20);
△ FF下,keyCode是只讀的, 那把回車轉(zhuǎn)換為tab怎么辦? 在錄入時(shí)進(jìn)行鍵值轉(zhuǎn)換怎么辦??
變通的方法是:
1. 回車跳轉(zhuǎn) -> 自己寫跳轉(zhuǎn)處理代碼.
遍歷dom里所有的元素, 找到當(dāng)前元素的下一個(gè)能夠設(shè)置焦點(diǎn)的元素, 給其設(shè)置焦點(diǎn)
2. 在能夠錄入的控件里,
把選中的部分替換為新錄入的內(nèi)容: var text = String.fromCharCode(event.keyCode);
同時(shí)阻止按鍵事件上傳, 調(diào)用: event.preventDefault()
△ <button> 會被firefox解釋為提交form或者刷新頁面???
需要寫標(biāo)準(zhǔn)<button type="button">
或者在onclick="原函數(shù)調(diào)用(); return false;"
△ 在firefox里, document.onfocus里獲得不到實(shí)際獲得焦點(diǎn)的控件?
為什么document.keydown可以呢?
△ children -> childNodes
△ sytle.pixelHeight -> style.height
△ 判斷函數(shù)或者變量是否存在
if (!("varName" in window)) var VarName = 1;
△ document.body.clientWidth
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
如果html包含上面的語句,則應(yīng)該用下面的方法獲取
document.documentElement.clientWidth
△ window.createPopup
FF不支持
△ document.body.onresize
FF 不支持
用window.onresize
注意,頁面打開時(shí)并不會觸發(fā)onresize事件? 需要在onload里也調(diào)用一次才行
△ box模型的問題
IE下默認(rèn)的是 content-box 為了統(tǒng)一,可用設(shè)置:
div, td {-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding: 0;}
也可用在文檔頭加入:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">
但是對IE舊代碼影響較大
△ 注冊事件
IE: attachEvent
FF: addEventListener("blur", myBlur, false);
第1個(gè)參數(shù)事件名稱不需要帶"on"
第3個(gè)參數(shù)false代表事件傳遞從事件對象沿dom樹往body方向傳
△ 觸發(fā)事件
IE: obj.fireEvent("onclick");
FF:
var e = document.createEvent("Events");
e.initEvent("click", true, false);
element.dispatchEvent(event)
△ 在事件處理函數(shù)中獲得對象句柄
var oThis = this;
obj.onfocus = function(evt){
oThis.doOnFocus(evt);
}
△ 統(tǒng)一事件處理框架代碼
doOnFocus(evt){
evt = evt || window.event;
var el = evt.target || evt.srcElement;
// 后續(xù)處理
}
△ FF不支持onpropertychange事件
但是FF里可以定義屬性的setter方法, 如下面的:
HTMLElement.prototype.__defineSetter__("readOnly",function(readOnly){
// 構(gòu)造虛擬的event對象
var evt = [];
evt["target"] = this;
evt["propertyName"] = 'readOnly'
//onpropertychange函數(shù)需要定義evt參數(shù), 參考統(tǒng)一事件處理框架代碼
if (this.onpropertychange) this.onpropertychange(evt);
});
☆ IE -> firefox css類
△ cursor:hand -> cursor:pointer
△ expression firefox不支持
在IE下expression也非常消耗CPU,所以不應(yīng)該使用!!
為了達(dá)到較好的效果,應(yīng)該建立自己的expression to javascript的處理函數(shù)
這樣在IE和FF里就都能用了.
△ FILTER firefox不支持
filter: Alpha(Opacity=50);
替換為
-moz-opacity: 0.5;
△ text-overflow
不支持
△ transparent
firefox下 obj.setAttribute("bgColor","#ffffff") 只支持顏色
必須用 obj.style.backgroundColor = "transparent" 才行
△ FF下text控件高度與IE不同, 統(tǒng)一一下
input[type=text] {
height:20px;
}
注意input與[之間不能有空格!
△ font在IE里不能對body和td等起作用, FF可以
統(tǒng)一用 font-family
