網頁頁面NULL值對瀏覽器兼容性的影響
網頁頁面NULL值對瀏覽器兼容性的影響
近期做項目中一個頁面中的input radio出現瀏覽器兼容性問題。
主要問題:
在谷歌瀏覽器,360急速模式和搜狗急速模式中給radio初始動態賦值時。checked屬性失效,無法選中。註:360急速模式和搜狗急速模式使用了谷歌chorme的內核(又稱webkit內核)。
在火狐瀏覽器中給radio初始動態賦值時,checked屬性正常選中。
本來同事以為是瀏覽器兼容問題,始終未能解決這個問題。後來這個Bug交由我來改動。
初始接到任務時,也懷疑是瀏覽器兼容問題,但後來細致一想。谷歌這麽牛皮的技術實力,出問題的幾率應該比較小,遂從代碼本身查找問題。後來發現原來是有一個EL表達式的值附了NULL值,影響了radio的選中,才出現了瀏覽器不兼容的Bug。
總結經驗教訓。對NULL值的推斷。十分必要,特別是頁面中JQuery不會對隱性錯誤進行提示。
先給出問題的代碼塊。主要功能是依據後臺傳參選擇radio是否選中。
<%-- <c:choose> <c:when test="${gj.notmodelbad=='1' }"> <input type="radio" name="nobad" value="1" checked="checked" style="margin-left:18px;"/><label style="margin-left:5px;font-size:14px;">信息描寫敘述不符,無法推斷</label><br /> <input type="radio" name="nobad" value="2" style="margin-left:112px;font-size:14px;"/><label style="margin-left:5px;font-size:14px;">現場分析部件正常,非我司模塊問題</label> </c:when> <c:when test="${gj.notmodelbad=='2' }"> <input type="radio" name="nobad" value="1" style="margin-left:18px;"/><label style="margin-left:5px;font-size:14px;">信息描寫敘述不符,無法推斷</label><br /> <input type="radio" name="nobad" value="2" checked="checked" style="margin-left:109.5px;font-size:14px;"/><label style="margin-left:5px;font-size:14px;">現場分析部件正常,非模塊問題</label> </c:when> <c:otherwise> <input type="radio" name="nobad" value="1" style="margin-left:18px;"/><label style="margin-left:5px;font-size:14px;">信息描寫敘述不符。無法推斷</label><br /> <input type="radio" name="nobad" value="2" style="margin-left:112px;font-size:14px;"/><label style="margin-left:5px;font-size:14px;">現場分析部件正常,非我司模塊問題</label> </c:otherwise> </c:choose> --%>
我的解決方式:加入JQuery。依據後臺傳參動態賦值。
<div> <c:choose> <c:when test="${gj.badtype=='2'}"> <input type="checkbox" value="2" id="nomd" checked="checked"/> </c:when> <c:otherwise> <input type="checkbox" id="nomd" value="2" /> </c:otherwise> </c:choose> <label><strong>非模塊不良</strong></label> <table class="bdrighttab"> <tr> <td style="width:100px;"><input id="nobadRad1" type="radio" name="nobad" value="1" style="margin-left:112px;" /><label style="margin-left:5px;font-size:14px;">信息描寫敘述不符。無法推斷</label><br /> <input id="nobadRad2" type="radio" name="nobad" value="2" style="margin-left:112px;font-size:14px;" /><label style="margin-left:5px;font-size:14px;">現場分析部件正常。非我司模塊問題</label> <input type="text" style="background-color:#e4e4e4;border-style:solid;border-color:#B0B0B0;border-width:thin;" class="otherreason" value="${gj.otherreason}" /></td> </tr> <%-- <c:choose> <c:when test="${gj.notmodelbad=='1' }"> <input type="radio" name="nobad" value="1" checked="checked" style="margin-left:18px;"/><label style="margin-left:5px;font-size:14px;">信息描寫敘述不符,無法推斷</label><br /> <input type="radio" name="nobad" value="2" style="margin-left:112px;font-size:14px;"/><label style="margin-left:5px;font-size:14px;">現場分析部件正常,非我司模塊問題</label> </c:when> <c:when test="${gj.notmodelbad=='2' }"> <input type="radio" name="nobad" value="1" style="margin-left:18px;"/><label style="margin-left:5px;font-size:14px;">信息描寫敘述不符,無法推斷</label><br /> <input type="radio" name="nobad" value="2" checked="checked" style="margin-left:109.5px;font-size:14px;"/><label style="margin-left:5px;font-size:14px;">現場分析部件正常,非模塊問題</label> </c:when> <c:otherwise> <input type="radio" name="nobad" value="1" style="margin-left:18px;"/><label style="margin-left:5px;font-size:14px;">信息描寫敘述不符。無法推斷</label><br /> <input type="radio" name="nobad" value="2" style="margin-left:112px;font-size:14px;"/><label style="margin-left:5px;font-size:14px;">現場分析部件正常,非我司模塊問題</label> </c:otherwise> </c:choose> --%> </table> </div> </div>
JQuery動態賦值:
$(document).ready(function(){ var notmodelbad = ${gj.notmodelbad}; if(notmodelbad=='1'){ $("#nobadRad1").attr("checked",true); $("#nobadRad2").attr("checked",false); } else if(notmodelbad=='2'){ $("#nobadRad1").attr("checked",false); $("#nobadRad2").attr("checked",true); } });
後臺的.do型方法
// 市場並聯交互 @RequestMapping("maMutualGd.do") public String MaMutualGd(HttpServletRequest request, HttpServletResponse response) throws Exception { String type = request.getParameter("type"); int marketjiaohuid = Integer.valueOf(request.getParameter("id")); String vCode = String.valueOf((request.getParameter("vcode"))); String date_from1 = String.valueOf((request.getParameter("datfrom"))); String date_to1 = String.valueOf((request.getParameter("datto"))); getCurrentInfo(type, vCode, date_from1, date_to1); List<OdspappTGongdan> odspappTGongdanDtoList = qualityPerformanceService .getOdspappTGongdanDtoList(); List<OdspappTGongdan> gdlist = new ArrayList<OdspappTGongdan>(); List<OdspappTGongdan> gdcloselist = new ArrayList<OdspappTGongdan>(); for (OdspappTGongdan g : odspappTGongdanDtoList) { if (g.getJiaohustatus().equals("4")) { gdcloselist.add(g); } else { gdlist.add(g); } } OdspappTGongdan gd = new OdspappTGongdan(); if (type.substring(1, 2).equals("0")) { gd = gdlist.get(marketjiaohuid); request.setAttribute("gd", gd); } else { gd = gdcloselist.get(marketjiaohuid); request.setAttribute("gd", gd); } GongdanBadJiaohu gj = qualityPerformanceService.getGdJiaohuInfo( gd.getGdCode(), gd.getZyAccount()); if (gj.getChangestatus() == null || gj.getChangestatus() == "") { gj.setChangestatus("0"); } if (gj.getNotmodelbad() == null || gj.getNotmodelbad() == "") { gj.setNotmodelbad("0"); } System.out.println("Changestatus:" + gj.getChangestatus()); System.out.println("Notmodelbad:" + gj.getNotmodelbad()); request.setAttribute("gj", gj); // request.getRequestDispatcher("UserEvaluation.jsp").forward(request, // response); return "pages/usersEvaluation/UserMutual"; }
處理後的效果:
補充。此問題另一種簡單的處理方式,就是用圖片取代radio。選中或不選中,換兩張圖即可。
問題代碼盡管不是本人所寫。但也提醒了我對Java空值處理的重要性。以後寫代碼時一定要增加NULL的推斷,有時我們遇到的大多數空指針異常,基本都是未初始化導致的NULL值異常。
網頁頁面NULL值對瀏覽器兼容性的影響