JQuery 仅适用于兼容模式

Question

我正在创建一个将显示在本地 Intranet 站点上的 Web 应用程序
注意我正在使用 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

编辑： 所以我原来的 'fix' 在大约 5 页加载后停止工作，所以我深入研究了一点，并设法找到了根（s ) 的问题。

事实证明这是几件事的结合。我设法强制我的页面样式和一切保持正常，即使在兼容性视图中使用

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

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

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

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

所以删除它让我的 JavaScript 变成了运行。 Source.

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

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 仅适用于兼容模式

JQuery ONLY works in compatibility mode

html

javascript

jquery

internet-explorer-11