Question

我有这段代码：

window.onload= function() {
    window.scrollTo(0, 0.9);
    if (navigator.standalone) return;
    for (var i= document.links.length; i-->0;) {
        document.links[i].onclick= function() {
            var req= new XMLHttpRequest();
            req.onreadystatechange= function() {
                if (this.readyState!==4) return;
                document.body.innerHTML= this.responseText;
            };
            req.open('GET', this.href, true);
            req.send();
            return false;
        };
    }
};

它基本上得到了一个单击的href，并将该href加载到当前正文中。现在问题是它只能工作一次。一旦内容发生变化，只要我点击另一个链接（在新页面上），它就会重定向并且网址会发生变化。然后ajax再次工作，因为我“真的”改变了页面并重置了整个事物。

我有点迷失在这里。如何重置我的功能才能永远工作？谢谢，

克里斯托弗

编辑：好的，我试过这样的事情：

function ajax(){
    if (navigator.standalone) return;
    for (var i= document.links.length; i-->0;) {
        document.links[i].onclick= function() {
            var req= new XMLHttpRequest();
            req.onreadystatechange= function() {
                if (this.readyState!==4) return;
                document.body.innerHTML= this.responseText;
            };
            req.open('GET', this.href, true);
            req.send();
            ajax();
            return false;
        };}
    }



window.onload= function() {
    window.scrollTo(0, 0.9);
    ajax();

};

但无济于事......在完成时调用ajax（）函数显然是不够的。任何人都可以帮助我一点：s。这不是我的专业领域:)。

Answer 1

在使用响应对原始<body>内容进行爆破后，您必须重新建立“单击”处理程序。由于旧DOM中的所有内容在响应返回后都消失了，因此处理程序绑定也消失了。

Answer 2

它是否被缓存？将“？random =”+ Math.random添加到href。

Answer 3

您正在替换整个文档，包括将AJAX处理程序绑定到的链接。

window.onload只会在加载文档时触发，而不是在ajax调用完成时触发。

将onload处理程序放在一个新函数中，然后手动调用它就绪状态更改处理程序。

Answer 4

当您设置document.body.innerHTML时，您正在替换整个文档，这意味着您连接的onclick事件已经消失。您必须将点击事件重新绑定到新链接。

Answer 5

使用数据替换正文时，您将删除链接。

这也是建议使用像jQuery这样的库的代码。在这种情况下，几乎所有代码都减少到了这一点，并处理跨浏览器问题：

$('a').live('click', function() {
    $.get( this.ref , function(data) {
        $('body').html(data);
    });
    return false;
});

ajax只加载一次

5 个答案: