XML未加载到Internet Explorer中

Question

我正在使用html5 css和xml页面创建一些闪存卡。 这在chrome和Firefox中效果很好，但无法在Internet Explorer中加载。 我不确定是htlm5代码还是xml页面导致其无法加载。 在某些情况下，我会将图像和文本加载到xml文件中。 我想知道问题是否来自xml文件中的<qText>标签。

这是html页面的代码：



    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9" >
    <meta name="Author" content="Drew Scott" />
    <title>Chemistry Flash Cards</title>
    <link rel="stylesheet" href="HullFlashCards.css" />
    <script type="text/javascript" src="HullFlashCards.js" ></script>


</head>

<body>
    <div class="page">
        <div class="previous"><img src="img/left.png" width="50" height="52" alt="left" onclick="prevCard()"></div>
        <form name="cards">
        <div class="card" id="card1">
            <div class="cardContent">
                <p class="cardText" ><span id="question"></span></p>
                <img id="img" src="" width="" height="" alt=""/>
                <div id="audioContainer"></div>
            </div>
            <input type="button" class="clickForAnswer" onClick="rotateYDIV('card1', 'backOfcard1')" 
            value="Answer"></input>
        </div>

        <div class="backOfcard" id="backOfcard1">
            <div class="backOfcardContent">
                <p class="answer" ><span id="answer"></span></p>
            </div>
            <input type="button" class="clickForAnswer" onClick="rotateYDIV('card1', 'backOfcard1')" 
            value="Question"></input>
        </div>

        <div class="next"><img src="img/right.png" width="50" height="52" alt="right" onclick="nextCard()"></div>
        <input type="button" class="randomize" onclick="clickRandom()" value="Randomize" name="random"></input>
        <input type="button" class="Afirst" onclick="clickAFirst()" value="Answer First" name="Afirst"></input>
        </form>
    </div>
    <script type="text/javascript">
    var xmlFile;
    xmlFile="chemistry";
    if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
        }
    else
        {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    xmlhttp.open("GET",xmlFile+'.xml',false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;

    questionSwap();

    maxCardNum=xmlDoc.getElementsByTagName('numOfCards')[0].childNodes[0].nodeValue-1;

    </script>

</body>
</html>




Here is the css: 

    @charset "utf-8";
/* CSS Document */

body {
    background:#d7d7da;
}
.page {
    position:relative;
    margin:auto;
    width:480px;
}
.randomize {
    position:absolute;
    top:605px;
    left:90px;
}
.Afirst
{
    position:absolute;
    top:605px;
    right:90px;
}
.card {
    position:absolute;
    top:0px;
    left:80px;
    width:320px;
    max-width:320px;
    height:600px;
    max-height:600px;
    border:1px solid black;
    border-radius:10px;
    background:white;
    display:table;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    z-index:1;
}
.cardContent {
    display:table-cell;
    vertical-align:middle;
    padding:5px;
    max-width:502px;
    max-height:310px;
}

.cardText {
    font-size:22px;
}
.clickForAnswer {
    position: absolute;
    bottom:5px;
    right:5px;
}
.backOfcard {
    position:absolute;
    top:0px;
    left:80px;
    width:320px;
    max-width:320px;
    height:600px;
    max-height:600px;
    border:1px solid black;
    border-radius:10px;
    background:white;
    display:table;
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    z-index:0;
}
.backOfcardContent {
    display:table-cell;
    vertical-align:middle;
    padding:5px;
    text-align:center;
    max-width:502px;
    max-height:310px;

}
.answer {
    font-size:26px;
}
#audio {
    max-width:310px;
}
.next {
    position:absolute;
    top:231px;
    right:0px;
    margin-left:30px;
    float: right;
}
.previous {
    position:absolute;
    top:231px;
    left:0px;
    margin-right:30px;
    float:left;
}
#img {
    display:block;
    max-width:310px;
    max-height:590px;
    margin-left:auto;
    margin-right:auto;


}


and here is a sample from the xml page:

    <?xml version="1.0" encoding="ISO-8859-1"?>
<cards>
    <numOfCards>48</numOfCards>
    <textCard id="0">
        <question>
            <qText>  </qText>
            <imageSrc>graphics/alcohol thermometer.JPG</imageSrc>
            <imageWidth>54</imageWidth>
            <imageHeight>505</imageHeight>
            <imageAlt>IE doesn't work</imageAlt>
            <audioMp3>none</audioMp3>
            <audioOgg>none</audioOgg>
        </question>
        <answer>
            <aText>spirit-filled (alcohol) thermometer</aText>
        </answer>
    </textCard>

Answer 1

您的qText元素似乎只包含空白。 IE使用MSXML作为XML解析器，该解析器剥离空白文本节点，因此您尝试读取document.getElementById("question").innerHTML=xmlDoc.getElementsByTagName('qText')[cardNum].childNodes[0].nodeValue; 给出错误，因为childNodes[0]不存在。 根据您的需要，您可以修复输入并将一些文本放入qText元素中，或者您需要尝试通过<qText xml:space="preserve"> </qText>解决问题，还是需要将Javascript代码调整为使用例如

function getText(element) {
  if (typeof element.textContent !== 'undefined') {
    return element.textContent;
  }
  else if (typeof element.innerText !== 'undefined') {
    return element.innerText;
  }
  else if (typeof element.text !== 'undefined') {
    return element.text;
  }
}

然后使用

document.getElementById("question").innerHTML = getText(xmlDoc.getElementsByTagName('qText')[cardNum]);

而不是document.getElementById("question").innerHTML=xmlDoc.getElementsByTagName('qText')[cardNum].childNodes[0].nodeValue; 。

XML未加载到Internet Explorer中

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-12-06 13:06:47

XML未加载到Internet Explorer中

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-12-06 13:06:47

解决方案1
0 已采纳 2013-12-06 13:06:47