Question

我正在创建一个将在本地Intranet站点上显示的Web应用程序 NB我正在使用IE11
它从XML文件中获取信息并循环显示它，依次显示每个部分。我不得不使用旧版本的JQuery，以便在它运行的系统上运行，所以我使用1.12.4。我的问题是页面在第一个实例中提取信息，但之后它什么也没做。快速检查调试控制台告诉我该页面是Unable to get property 'childNodes' of undefined or null reference - 这对我来说似乎很奇怪，因为它在第一个实例中有效。如果我在兼容性视图中运行页面，脚本可以正常工作，但这会破坏我的所有样式等。有没有办法解决这个问题，或者我将不得不处理一个糟糕的兼容性视图样式页面？
我的代码在下面的 HTML

<div id="MainNews">
    <div class="panel panel-default" id="MainNewsStory">
        <h1 id="StoryHeadline"></h1>
        <p id="StoryBody"></p>
    </div>
    <img id="StoryImage" src=""/>
</div>

XML

<NewsArticle>
<Story>
    <StoryHeadline>This is the headline of the first news story!</StoryHeadline>
    <StoryBody>This is the body of the first news story. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id nunc ex.</StoryBody>
    <StoryImage>Images\ImageOne.png</StoryImage>
</Story>
<Story>
    <StoryHeadline>This is the second headline! It accompanies the second story</StoryHeadline>
    <StoryBody>This is the body of the second news story. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id nunc ex.</StoryBody>
    <StoryImage>Images\ImageTwo.png</StoryImage>
</Story>
<Story>
    <StoryHeadline>This is the third headline now!</StoryHeadline>
    <StoryBody>This is the body of the third news story. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id nunc ex.</StoryBody>
    <StoryImage>Images\ImageThree.png</StoryImage>
</Story>

的的JavaScript

$(function(){
$.ajax({
    type: "GET",
    url: "SetScreen.xml",
    dataType: "xml",
    success: parseXml
});

function parseXml(xml) {
    //--Fill the content in to the main news story START--//
    var storyCount = 0;
    var xStories = xml.getElementsByTagName("StoryHeadline");
    var xStoryBody = xml.getElementsByTagName("StoryBody");
    var xStoryImage = xml.getElementsByTagName("StoryImage")
    var maxStories = xStories.length;
    function fillStory(){
        $('#StoryHeadline').html(xStories[(storyCount) % maxStories].childNodes[0].nodeValue);
        $('#StoryBody').html(xStoryBody[(storyCount) % maxStories].childNodes[0].nodeValue); 
        $('#StoryImage').prop("src", xStoryImage[(storyCount++) % maxStories].childNodes[0].nodeValue);
    }
    //--Fill the content in to the main news story END--//

    fillStory();
    var storyTimer = setInterval(fillStory, 2000);
}
});

非常感谢任何帮助。

Answer 1

编辑：所以我的原始'修复'在大约5页加载后停止了工作，所以我深入研究了一下，并设法找到了问题的根源。

<小时/> 结果证明这是几件事的结合。我设法强制我的页面样式，即使在使用

的兼容性视图中，一切都保持正常

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

是我<head>中的第一个标记。所以这解决了可怕的样式问题，即使页面被强制作为兼容性视图。 Source here.

该问题的另一个原因是我的xml文件包含以下标题，显然可以在IE中中断。

<?xml version="1.0" encoding="utf-8" ?>

因此删除它允许我的JavaScript运行。 Source.

我遇到的最后一个问题是，一旦JavaScript运行，它只会在停止之前运行几次，然后告诉我它无法访问它尝试的变量。所以我首先尝试在函数内部声明变量，但这意味着每次函数运行时都会声明它们，这会导致一些难看的内存问题。然后我转而声明函数之外的变量，但是在里面分配它们的值。

var storyCount = 0;
    var xStories, xStoryBody, xStoryImage, maxStories;
    function fillStory() {
        xStories = xml.getElementsByTagName("StoryHeadline");
        xStoryBody = xml.getElementsByTagName("StoryBody");
        xStoryImage = xml.getElementsByTagName("StoryImage");
        maxStories = xStories.length;
        $("#StoryHeadline").html(xStories[(storyCount) % maxStories].childNodes[0].nodeValue);
        $("#StoryBody").html(xStoryBody[(storyCount) % maxStories].childNodes[0].nodeValue);
        $("#StoryImage").prop("src", xStoryImage[(storyCount) % maxStories].childNodes[0].nodeValue);
        storyCount = storyCount + 1;

所以现在一切都按照我的意愿运作了！

JQuery仅适用于兼容模式

1 个答案: