放置JS后导航器停止工作

Question

更新：

您好，我创建了一个导航栏，可以将不同的页面加载到一个 div 中。这是导航栏的来源：

<div id="navBar">
<ul>
    <li><a href="#" onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');">Home</a></li>
    <li><a href="about.php" onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');">Staff</a></li>
    <li><a href="goodies.php" onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');">Goodies</a></li>
    <li><a href="stuff.php" onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');">Events</a></li>
    <li><a href="#/contact.php" onClick="document.getElementById('bottom').innerHTML = loadPage('load.php');">News</a></li>
    <li><a href="#" onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');">Games Center</a></li>
    <li><a href="phptesting.php" onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');">Habbo</a></li>
</ul>

这是放置文本的 div：

    <!-- Main Body -->
<div id="right">
<a id="bottom">
</div></a>

然后这是 javascript 女巫获取文件并将其放入 div：

function loadPage(href)
            {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET", href, false);
                xmlhttp.send();
                return xmlhttp.responseText;
            }

现在，这两个代码的作用是当文本之一（例如 Home）被点击时，在底部 Div 之间加载文本。当我将这段代码放在这里以在页面加载时加载文本时：

<script>
function loadXMLDoc(filename) {
    var xmlhttp;
    if (window.XMLHttpRequest)  {
      xmlhttp=new XMLHttpRequest();
    }
    else {
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        after_load_function(xmlhttp.responseText);
      }
    }
    xmlhttp.open("GET",filename,true);
    xmlhttp.send();
    }

    function after_load_function(responseText) {
      document.getElementById("right").innerHTML = responseText;
    }

    window.onload = function() {
      loadXMLDoc("welcome.html");
    }
</script> 

当我放置它时，它会导致页面不再加载。但如果我删除它，它就会开始工作，有什么想法吗？

Answer 1

为什么不使用 jQuery 来支持跨浏览器呢？原生 js 很好，但可能不适合跨浏览器。尝试使用 jQuery 看看您的问题是否可以解决。

Answer 2

您的 loadPage() 函数在哪里定义？ loadPage() 函数是否调用 loadXMLDoc() 函数？如果是，那么：

1- 我注意到您的 ajax 回调函数执行以下操作：

function after_load_function(responseText) {
    document.getElementById("right").innerHTML = responseText;
}

2- 但是，在您的 loadPage() 函数中，您还进行了这样的分配：

onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');"

但是，在您的第一次分配中，“正确”的 html 内容已更改。不再存在“底部”，因此在第二次分配中将引发异常。

<div id="right">
<a id="bottom">
</a></div>

我认为，这就是您的页面停止工作的原因。

更新 使用 jQuery，您可以像这样归档相同的结果：

function loadPage(pageToLoad) {
    $.ajax({
        url: pageToLoad,
        complete: function(res) {
            $('#bottom').html(res.responseText);
        }
    });
}

然后像这样调用：

onClick="loadPage('hello-world.html');"