js冲突怎么解决
a．最容易出現的就是js的命名沖突
①、變量名沖突
變量有全局變量和局部變量當全局變量變量和局部變量名稱一致時，就會js沖突，由于變量傳遞數值或地址不同就會產生JavaScript錯誤，甚至死循環。
②、方法名沖突
函數中有很多方法，不同的js之間可能函數名一樣，這就使得程序執行時不知道改調用那個方法或者哪個方法執行后的結果，最終導致程序加載失敗。
③、函數名沖突
一般是命名導致JS沖突。解決方法主要是查找在加載的js中是否具有相同命名的情況，然后修改命名
b．onload 事件沖突
如果在js中調用了window.onload = function()，同時在頁面上又有body onload語句,會導致window.onload事件覆蓋掉body onload事件而出現錯誤.
解決方法：attachEvent給onload添加所需運行的函數。
c . 瀏覽器不兼容問題，雖然這個不屬于js沖突但是也常見的js的原因之一
①document.form.item 問題
(1)現有問題: 現有代碼中存在許多document.formName.item("itemName") 這樣的語句，不能在Fx 下運行
(2)解決方法: 改用document.formName.elements["elementName"]
②集合類對象問題
(1)現有問題: 現有代碼中許多集合類對象取用時使用()，IE 能接受，Fx 不能。
(2)解決方法: 改用[] 作為下標運算。如:document.forms("formName") 改為document.forms["formName"]。又如:document.getElementsByName("inputName")(1) 改為document.getElementsByName("inputName")
③window.event
(1)現有問題: 使用window.event 無法在Fx 上運行
(2)解決方法: Fx 的event 只能在事件發生的現場使用，此問題暫無法解決。可以這樣變通:
原代碼(可在IE中運行):
代碼:
<inputtype="button" name="someButton" value="提交
"οnclick="javascript:gotoSubmit()"/>
...
<script language="javascript">
function gotoSubmit() {
...
alert(window.event);
// use window.event
...
}
</script>
新代碼(可在IE和Fx中運行):
代碼:
<input type="button" name="someButton" value="提交"
οnclick="javascript:gotoSubmit(event)"/>
...
<script language="javascript">
function gotoSubmit(evt) {
evt = evt ? evt : (window.event ? window.event : null);
...
alert(evt);
// use evt
...
}
</script>
此外，如果新代碼中第一行不改，與老代碼一樣的話(即gotoSubmit 調用沒有給參數)，則仍然只能在IE中運行，但不會出錯。所以，這種方案tpl 部分仍與老 代碼兼容。
④HTML 對象的id 作為對象名的問題
(1)現有問題 ：在IE 中，HTML 對象的ID 可以作為document 的下屬對象變量名直接使用。在Fx 中不能。
(2)解決方法 ：用getElementById("idName") 代替idName 作為對象變量使用。
⑤用idName字符串取得對象的問題
(1)現有問題 ：在IE中，利用eval(idName) 可以取得id 為idName 的HTML 對象，在Fx 中不能。
(2)解決方法 ：用getElementById(idName) 代替eval(idName)。
⑥變量名與某HTML 對象id 相同的問題
(1)現有問題 ：在Fx 中，因為對象id 不作為HTML 對象的名稱，所以可以使用與HTML 對象id 相同的變量名，IE 中不能。
(2)解決方法 ：在聲明變量時，一律加上var ，以避免歧義，這樣在IE 中亦可正常運行。
此外，最好不要取與HTML 對象id 相同的變量名，以減少錯誤。
⑦event.x 與event.y 問題
(1)現有問題 ：在IE 中，event 對象有x, y 屬性，Fx中沒有。
(2)解決方法 ：在Fx中，與event.x 等效的是event.pageX。但event.pageX IE中沒有。
故采用event.clientX 代替event.x。在IE 中也有這個變量。
event.clientX 與event.pageX 有微妙的差別(當整個頁面有滾動條的時候)，不過大多數時候是等效的。 如果要完全一樣，可以稍麻煩些:
mX = event.x ? event.x : event.pageX;
然后用mX 代替event.x
(3)其它：event.layerX 在IE 與Fx 中都有，具體意義有無差別尚未試驗。
⑧關于frame
(1)現有問題 ：在IE中 可以用window.testFrame取得該frame，Fx中不行
(2)解決方法 ：在frame的使用方面Fx和ie的最主要的區別是: 如果在frame標簽中書寫了以下屬性:
<frame src="xx.htm" id="frameId" name="frameName" />
那么ie可以通過id或者name訪問這個frame對應的window對象，而Fx只可以通過name來訪問這個frame對應的window對象，例如如果上述frame標簽寫在最上層的window里面的htm里面，那么可以這樣訪問
ie: window.top.frameId或者window.top.frameName來訪問這個window對象
Fx: 只能這樣window.top.frameName來訪問這個window對象
另外，在Fx和ie中都可以使用window.top.document.getElementById("frameId")來訪問frame標簽 ，并且可以通過window.top.document.getElementById("testFrame").src = 'xx.htm'來切換frame的內容 ，也都可以通過window.top.frameName.location = 'xx.htm'來切換frame的內容
⑨在Fx中，自己定義的屬性必須getAttribute()取得
⑩在Fx中沒有parentElement parement.children 而用
parentNode parentNode.childNodes
childNodes的下標的含義在IE和Fx中不同，Fx使用DOM規范，childNodes中會插入空白文本節點。
一般可以通過node.getElementsByTagName()來回避這個問題。 當html中節點缺失時，IE和Fx對parentNode的解釋不同，例如：
<form>
<table>
<input/>
</table>
</form>
Fx中input.parentNode的值為form, 而IE中input.parentNode的值為空節點
Fx中節點沒有removeNode方法，必須使用如下方法node.parentNode.removeChild(node)
d . const 問題
(1)現有問題: 在IE 中不能使用const 關鍵字。如const constVar = 32; 在IE中這是語法錯誤。
(2)解決方法: 不使用const ，以var 代替。
.. body 對象
Fx的body在body標簽沒有被瀏覽器完全讀入之前就存在，而IE則必須在body完全被讀入之后才存在
. url encoding
在js中如果書寫url就直接寫&不要寫&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url那么很有可能url不會被正常顯示以至于參數沒有正確的傳到服務器
一般會服務器報錯參數沒有找到,當然如果是在tpl中例外，因為tpl中符合xml規范，要求&書寫為&
一般Fx無法識別js中的&
e . nodeName 和tagName 問題
(1)現有問題: 在Fx中，所有節點均有nodeName 值，但textNode 沒有tagName 值。在IE 中，nodeName 的使用好象
有問題(具體情況沒有測試，但我的IE已經死了好幾次)。
(2)解決方法: 使用tagName，但應檢測其是否為空。
元素屬性：IE下input.type屬性為只讀，但是Fx下可以修改
document.getElementsByName() 和document.all[name] 的問題
(1)現有問題: 在IE 中，getElementsByName()、document.all[name] 均不能用來取得div 元素(是否還有其它不能取的元素還不知道)。
轉載于:https://www.cnblogs.com/lazb/p/6163290.html
總結
- 上一篇： 单词倒排
- 下一篇： jQueryh插件imgareasele