在我打開Developer工具之前，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主頁上閱讀你問題的標題，我知道問題是什么。 閱讀問題中的代碼證實了這一點。 你遇到的問題是line console.log(catName);

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

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

這里的第一課不是在完成后將調試代碼留在程序中。 只有在您測試程序時才應該調用console ; 當你完成它們之后，把它們拿出來。

第二個教訓是，如果您確實需要在代碼中進行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');
  ...