Question

这与另一个问题（Chart is rendered in Chrome, but not in FF and IE）有关，但是，我认为这本身就是一个有效的问题，这有助于更深入地描述问题。

当我偶然用Firefox打开我的网页时，我意识到这种行为，并注意到我的amChart图形不再起作用了，我追溯到代码中的这些行：

xmlData = xmlHttp.responseXML;
var x=xmlData.getElementsByTagName("row");
xmlRowCount = x.length;

显然是Firefox＆amp; Internet Explorer引擎执行＆＃34; xmlData.getElementsByTagName＆＃34;与谷歌浏览器（它工作正常）不同，这反过来导致错误的返回值，因此完全破坏了所有后续代码。

问题是为什么FF和IE会这样做，以及如何防止它们这样做并返回正确的结果，就像Chrome一样。

我感谢任何建议，并希望你们中的一些人可以帮助我，并且可能知道这种奇怪行为的原因。

最好的问候，

daZza

编辑：为了完成浏览器测试，我还下载并测试了Opera。它在那里工作得很好，这使整个事情变得更加奇怪。 IE / FF与Chrome / Opera有什么区别？

EDIT2：这个发现看起来很有希望......我尝试添加第二个console.log消息，打印出相同的内容，但使用＆＃34;非命名空间名称＆＃34;对于XML标记，在这种情况下，z：row而不是row（row是命名空间名称，z：row是xml文件中的硬标记）。

我发现，Firefox / IE在非命名空间名称上使用这个新的console.log返回417。 Chrome / Opera返回0.反过来也是如此，因此Chrome使用命名空间返回417，而FF / IE返回0。

这让我相信，FF / IE有一个破碎的XML DOM，无法在XML文件中使用/使用/检测/ ...命名空间。

我想在这种情况下唯一的解决方法是使用没有命名空间的XML，以便它适用于所有浏览器？

这是XML文件的简短示例（取自Sharepoint API）：

 <xml xmlns:s='uuid:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882'
 xmlns:dt='uuid:C2F41010-65B3-11d1-A29F-00AA00C14882'
 xmlns:rs='urn:schemas-microsoft-com:rowset'
 xmlns:z='#RowsetSchema'>
 <s:Schema id='RowsetSchema'>
 <s:ElementType name='row' content='eltOnly' rs:CommandTimeout='30'>
  <s:AttributeType name='blub' rs:name='blah' rs:number='1'>
     <s:datatype dt:type='string' dt:maxLength='512' />
  </s:AttributeType>
 </s:ElementType>
 </s:Schema>
 <rs:data>
 <z:row blub="blahblah" />
 </rs:data>  
 </xml>

PS：以下是可能与此问题相关的一些代码段：

HTML标题底部的JS部分（这是发生错误的地方）：

var xmlRowCount;

var arrArt = new Array();
var arrPriority = new Array();
var arrTermin = new Array();
var arrResult = new Array();

var arrCalcPrio = new Array();
var avgCalcPrio = new Array();

var terminCounter = 0;
var avgCounter = 0;

 // button_bereichand button_unterbereich are the values from two dropdown boxes. --> Shouldn't have relevance for the problem at hand. The xmlFile parameter is an well formed and validated XML file within the same domain.

function loadXML(xmlFile, button_bereich, button_unterbereich)
{

    var xmlHttp = null;
    var xmlData;
    var sum = 0;
    var bereich = button_bereich;
    var unterbereich = button_unterbereich;
    var spUnterbereich = "";

    console.log("Bereich: " + bereich);
    console.log("Unterbereich: " + unterbereich);

    arrArt.length = 0;
    arrPriority.length = 0;
    arrCalcPrio.length = 0;

    if (typeof XMLHttpRequest != 'undefined')
    {
        xmlHttp = new XMLHttpRequest();
    }

    if (!xmlHttp)
    {
        try
        {
            xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");

        } 
        catch(e)
        {
            try
            {
                xmlHttp = new ActiveXObject("Mircosoft.XMLHTTP")

            } 
            catch(e)
            {
                xmlHttp = null;
            }
        }
    }

    if (xmlHttp)
    {
        var url = xmlFile;
        xmlHttp.open("GET", url, true);
        xmlHttp.onreadystatechange = function() 
        {
            if (xmlHttp.readyState == 4)
            {
                var txt="";
                xmlData = xmlHttp.responseXML;
                var x=xmlData.getElementsByTagName("row");

                xmlRowCount = x.length;

                // Chrome: 417 | Firefox: 0 | Internet Explorer: 0
                console.log("Rowcount: " + xmlRowCount);

                for (i=0;i<xmlRowCount;i++)
                {
                    // do something with each row
                }

                for (j=0;j<xmlRowCount-1;)
                {   
                    // do something
                }

            }   
            }
        }
        xmlHttp.send();
    }

    return xmlData;
}


// bereichElement and bereichText are the values from two dropdown boxes. --> Shouldn't have relevance for the problem at hand
function getGraph()
{
    chartData.length = 0;
    validateData();

    var bereichElement = document.getElementById("bereich");
    var bereichText = bereichElement.options[bereichElement.selectedIndex].text;
    var unterbereichElement = document.getElementById("unterbereich");
    var unterbereichText = unterbereichElement.options[unterbereichElement.selectedIndex].text;

    var xmlDoc=loadXML("sp_xml.xml", bereichText, unterbereichText);
}

HTML Body中的JS（Body具有 body onload =＆＃34; getGraph（）;＆＃34;＆gt; 参数）：

// Actual chart creation (amCharts lib)
 var chart;
        var chartData = [];
        var chartCursor;

        AmCharts.ready(function() {

            // SERIAL CHART
            chart = new AmCharts.AmSerialChart();
            chart.pathToImages = "amcharts/images/";
            chart.dataProvider = chartData;
            chart.categoryField = "date";
            chart.dataDateFormat = "YYYY-MM-DD";
            chart.baseHref = true;

            // listen for "dataUpdated" event (fired when chart is rendered) and call zoomChart method when it happens
            chart.addListener("dataUpdated", zoomChart);

            // AXES
            // category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.parseDates = true; 
            categoryAxis.minPeriod = "DD"; 
            categoryAxis.dashLength = 1;
            categoryAxis.gridAlpha = 0.15;
            categoryAxis.minorGridEnabled = true;
            categoryAxis.axisColor = "#DADADA";

            // value
            var valueAxis = new AmCharts.ValueAxis();
            valueAxis.axisAlpha = 0.2;
            valueAxis.dashLength = 1;
            chart.addValueAxis(valueAxis);

            // GRAPH
            var graph = new AmCharts.AmGraph();
            graph.title = "red line";
            graph.valueField = "visits";
            graph.bullet = "round";
            graph.bulletBorderColor = "#FFFFFF";
            graph.bulletBorderThickness = 2;
            graph.bulletBorderAlpha = 1;
            graph.lineThickness = 2;
            graph.lineColor = "#0db503";
            graph.negativeLineColor = "#b5030d";
            graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>value: [[value]]</span></b>";
            graph.hideBulletsCount = 50; 
            chart.addGraph(graph);

            // CURSOR
            chartCursor = new AmCharts.ChartCursor();
            chartCursor.cursorPosition = "mouse";
            chart.addChartCursor(chartCursor);

            // SCROLLBAR
            var chartScrollbar = new AmCharts.ChartScrollbar();
            chartScrollbar.graph = graph;
            chartScrollbar.scrollbarHeight = 40;
            chartScrollbar.color = "#FFFFFF";
            chartScrollbar.autoGridCount = true;
            chart.addChartScrollbar(chartScrollbar);

            // WRITE
            chart.write("charts_container");

        });




         // this method is called when chart is first inited as we listen for "dataUpdated" event
        function zoomChart() {
            // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
            chart.zoomToIndexes(chartData.length - 40, chartData.length - 1);
        }

         // changes cursor mode from pan to select
        function setPanSelect() {
            if (document.getElementById("rb1").checked) {
                chartCursor.pan = false;
                chartCursor.zoomable = true;

            } else {
                chartCursor.pan = true;
            }
            chart.validateNow();
        }

        function validateData()
        {
            chart.validateData();
            console.log("Data validated");

        }

Answer 1

您的问题是http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-A6C9094中指定的getElementsByTagName指定匹配＆＃34;标记名＆＃34;，而不是本地名称，标记名称包含前缀（请参阅{{3它明确地说tagName是限定名称。）

这是Firefox和IE实施的行为。

据我所知，WebKit从未正确实现过那个规范，只在localName上匹配。

您可以使用getElementsByTagNameNS解决这个问题，只允许在所有现代浏览器中明确匹配localname。您可以传入实际的命名空间，也可以只传递"*"，如果您不关心命名空间部分。

getElementsByTagName（）。length在Firefox / Internet Explorer中不起作用

1 个答案: