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');"

放置JS后，Navigator停止工作

2 个答案: