[轉]IE9.0或者360下js(JavaScript、jQuery)不能正確執行(加載),按F12後執行正常;Firefox下ajax的success返回數據data(json、string)沒法獲

兼容問題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

總結:javascriptjQuery(本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>";  
                。。。。  
            }  
            }  
        }); 
相關文章
相關標籤/搜索