兼容問題1:javascript
頁面的分享等插件加載不全,並沒有法點擊。html
兼容問題2:前端
IE下頁面選擇器(#id、.class.etc.)綁定click事件沒法訪問到,後臺springmvc方法,也沒法獲取ajax的success方法返回值data。java
兼容問題3:jquery
在IE和Google下可以獲取,ajax的success返回的數據data,但firefox下獲取不到。ajax
兼容問題4:spring
頁面跳轉,或url進入,js代碼不能正確執行,若是按了F12後(開啓F12),JavaScript(加載)事件能夠正常響應,一切都正常執行。chrome
總結:javascript和jQuery(本js)等,在不一樣的瀏覽器下會有很大不一樣的區別,因此積累這些兼容的經驗,以便解決前端問題。json
感受ie和chrome有的時候有點像,但是到ie11就感受和firefox有點像了。瀏覽器
問題的來源:js衝突(導入)或者js版本,瀏覽器兼容等。
解決1:
html頁面的加載有多種寫法:
如1:$(function(){ ... });
如2:window.onload=function(){ ... }
如3:$(document).ready(function(){ ... });
但願同一個頁面,使用其中一種,便可,若是都使用,則會有問題,並卻在")"後邊,該有分號";"請不要省略。
還有導入時候:
<script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/js/jquery-1.8.0.min.js"></script>,引入一個便可,多個會衝突,當心jsp頁面導入衝突。
解決二、4:
其餘js事件異常,代碼用到console對象,某些版本的ie (360等)不打開控制檯("F12")是沒有console這個對象,在IE中使用了console.log致使的。刪除console.log對象。
解決3:
firefox對ajax的返回值都是XML Document,因此,通常作IE、chrome和firefox兩個分支,
getBrowserNV()方法
//解決firefox提交兼容,firefox and chrome button -> ajax and submit conflict,and firefox response data default xml type. var browser = getBrowserNV(); var reqPath = $("#req").val(); if(browser.indexOf("firefox") != -1){//firefox $.ajax({ url:reqPath + "/mvc/getcity?id="+value+"&date="+new Date(), type:"get", dataType: "json", //firefox success:function(data){ var county = eval(data); 。。。。 } } }); }else{//ie ,chrome etc. $.ajax({ url:reqPath + "/mvc/getcity?id="+value+"&date="+new Date(), type:"get", success:function(data){ var county = eval(data); var options = "<option value='0'>請選擇城市</option>"; 。。。。 } } });