在我打開開發人員工具之前，IE不加載XML內容？

Question

我有一個使用jQuery AJAX get請求從XML文件加載產品信息的頁面。這在FF和Chrome中運行良好，但內容不會在IE中加載。然而，它會在打開開發者窗口並刷新頁面之後加載數據！有誰知道爲什麼？

這裏是我的jQuery AJAX請求：

//Load the xml file 
$.ajax({ 
    type: "GET", 
    url: "xml/" + cat + ".xml", 
    dataType: ($.browser.msie) ? "text" : "xml", 
    success: function(data) { 
     alert('xml successfully loaded'); 
     var xml; 
     if (typeof data == "string") { 
     xml = new ActiveXObject("Microsoft.XMLDOM"); 
     xml.async = false; 
     xml.loadXML(data); 
     } else { 
     xml = data; 
     } 
     //Get total number of products in the category 
     $(xml).find('dataroot').each(function() { 
      var pTemp = $(this).attr('count'); 
      catName = $(this).attr('catTitle'); 
      console.log(catName); 
      pTotal = Number(pTemp); 
     }); 

     //Fill the correct entries onto the page 
     while (count<=pTotal) { 
       $(xml).find('product').each(function() { 
        if (count>lCounter && count<hCounter) { 
         var pName = $(this).find('ProductName').text(); 
         var pImage = $(this).find('Photo').text(); 
         var pCode = $(this).find('ProductCode').text(); 
         var pDesc = $(this).find('WebDescription').text(); 
         if (cat.substring(0,2)=='cs') { 
          var pPrice = $(this).find('PartyShackPrice').text(); 
         } else { var pPrice = $(this).find('RRP').text(); } 
         var pSize = $(this).find('size').text(); 
         var pLink = '<a href="item.html?'+cat+'-'+pCode+'">'; 

         var pHTML = '<div id="'+pCode+'" class="box">'; 
         pHTML += pLink + '<img src="images/SMALL_IMAGE/' + pImage + '" width="70" height"100" /></a>'; 
         pHTML += '<div class="boxText">'; 
         pHTML += pLink + '<div class="boxTitle">'+pName+'</div></a>'; 
         pHTML += '<div class="boxDesc">'+pDesc+'</div>'; 
         if (pSize !== 'Not Applicable') { pHTML += '<div class="boxSize">'+pSize+'</div>'; } 
         pHTML += '<div class="boxPrice">£'+pPrice+'</div>'; 
         pHTML += pLink + '<div class="boxBuy"></div></a>'; 
         pHTML += '</div></div>'; 

         $("#products").append(pHTML); 
        } 
        count +=1; 
       }); 
     } 

     //Work out the total number of pages the product list is split up into 
     if (pTotal%50==0) { pageTotal = pTotal/50; } 
     else { pageTotal = Math.floor(pTotal/50) + 1; } 
     console.log('pageTotal - ' + pageTotal); 


     //Show path of the current page 
     getPath(cat, catName, 0); 

     //Depending on page number show previous and next buttons and display product counter 
     if (pageTotal==1) { //page 1 and only one page 
      $("#prev").css("visibility", "hidden"); 
      $("#next").css("visibility", "hidden"); 
      $("#counter").append('1 - ' + pTotal + ' of ' + pTotal); 
     } else if ((pageNum==1) && (pageTotal!=1)) { //page 1 and multiple pages 
      $("#prev").css("visibility", "hidden"); 
      $("#next").append('<a href="products.html?'+cat+'-'+(pageNum+1)+'">Next &gt;&gt;</a>'); 
      $("#counter").append('1 - 50 of ' + pTotal); 
     } else if ((pageNum==pageTotal) && (pageTotal!=1)) { //last page when theres more than 1 page 
      $("#next").css("visibility", "hidden"); 
      $("#prev").append('<a href="products.html?'+cat+'-'+(pageNum-1)+'">&lt;&lt; Previous</a>'); 
      $("#counter").append((((pageNum-1)*50)+1) + ' - ' + pTotal + ' of ' + pTotal); 
     } else { // a middle page 
      $("#next").append('<a href="products.html?'+cat+'-'+(pageNum+1)+'">Next &gt;&gt;</a>'); 
      $("#prev").append('<a href="products.html?'+cat+'-'+(pageNum-1)+'">&lt;&lt; Previous</a>'); 
      $("#counter").append((((pageNum-1)*50)+1) + ' - ' + (pageNum * 50) + ' of ' + pTotal); 
     } 

     //Display page number 
     $("#currentPage").append(' ' + pageNum + ' of ' + pageTotal); 
    }, 
    error: function() { alert('failure'); } 
}); 
}); 

而且IE應該叫無論是成功的警報或錯誤警報但它既不直到打開窗口開發商和刷新頁面。

謝謝

Answer 1

我知道了什麼問題通過閱讀你的問題的標題SO主頁上。並閱讀問題中的代碼證實了這一點。您遇到的問題是線路console.log(catName);

在打開開發人員窗口之前，IE（以及其他一些瀏覽器）不會初始化console對象。

在此之前，嘗試使用console將返回undefined，並且會導致您的腳本停止運行。

這裏的第一課是在完成它之後不會在程序中留下調試代碼。撥打console的電話應該只在您測試該程序的時候纔有;當你完成他們的時候，把他們拿出來。

第二個教訓是，如果你做需要在你的代碼console電話，你應該包起來，檢查是否存在console它試圖使用它之前的代碼。從簡單的if(console) {console.log(...);}一直到編寫自己的調試類都有很多方法可以做到這一點。你怎麼做取決於你，但是通過這種方式編寫所有console代碼通常是個好主意，即使你只是在進行一些調試，以避免你在這裏遇到的問題。

希望有所幫助。

Answer 2

讓jQuery做它最擅長的事情。更換所有這一切：

dataType: ($.browser.msie) ? "text" : "xml", 
success: function(data) { 
    alert('xml successfully loaded'); 
    var xml; 
    if (typeof data == "string") { 
    xml = new ActiveXObject("Microsoft.XMLDOM"); 
    xml.async = false; 
    xml.loadXML(data); 
    } else { 
    xml = data; 
    } 
    ... 

有了這個：

dataType: "xml", 
success: function(xml) { 
    alert('xml successfully loaded'); 
    ...