getElementsByTagName().length在Firefox / Internet Explorer中不起

getElementsByTagName().length doesn't work in Firefox / Internet Explorer

本文关键字:Explorer Internet Firefox length getElementsByTagName      更新时间:2023-09-26

这与另一个问题有关(图表在Chrome中呈现,但不在FF和IE中呈现),然而,我认为这本身就是一个有效的问题,这将有助于更深入地描述问题。

当我偶然用Firefox打开我的网页并注意到我的amChart图表不再工作时,我意识到这种行为,我追溯到代码中的这些行:

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

显然Firefox &Internet Explorer引擎执行"xmlData"。getElementsByTagName"不同于谷歌浏览器(它工作得很好),这反过来会导致错误的返回值,因此彻底打破所有以下代码。

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

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

最诚挚的问候,

daZza

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

EDIT2:这个发现看起来很有希望…我尝试添加第二个console.log消息,打印出相同的东西,但使用XML标记的"非名称空间名称",在这种情况下z:row而不是row (row是名称空间名称,z:row是XML文件中的硬标记)。

我发现的是,Firefox/IE返回417与这个新的console.log上的非名称空间名称。Chrome/Opera返回0。反之亦然,因此Chrome使用名称空间返回417,而FF/IE返回0。

这让我相信,FF/IE有一个破碎的XML DOM,不能利用/使用/检测/…

我想在这种情况下唯一的修复是使用没有名称空间的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:这里有一些可能与问题相关的代码片段:

JS部分在HTML头的底部(这是错误发生的地方):

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);
}

JS in HTML Body(Body has Body onload="getGraph();"> 参数):

// 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");
        }

您的问题是,在http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-A6C9094中指定的getElementsByTagName在"tagname"上指定匹配,而不是本地名称,并且标记名称包括前缀(参见http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-104682815,其中明确表示tagname是限定名称)。

这是Firefox和IE实现的行为。

WebKit从未正确实现该规范,只匹配localName而不是,据我所知。

您可以通过使用getElementsByTagNameNS来解决这个问题,它允许您仅在所有现代浏览器中显式地匹配localname。您可以传入您的实际名称空间,或者如果您不关心名称空间部分,则直接传入"*"