1. 程式人生 > >網頁頁面NULL值對瀏覽器兼容性的影響

網頁頁面NULL值對瀏覽器兼容性的影響

vco ise alt trac script input 有時 alua arraylist

網頁頁面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> --%>
EL表達式${gj.notmodelbad}的值可能為空,需進行處理。

我的解決方式:加入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值對瀏覽器兼容性的影響