兼容问题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>"; 。。。。 } } });