使用加载文档的路径以root作为其相对路径而不是源文档的路径加载HTML

时间:2011-12-20 10:12:40

标签: javascript jquery ajax load

我有类似的东西,

<html>
<head>
   <script src="jquery.js" type="text/javascript"></script>
</head>
<body>
   Loading your content...
</body>
<script type="text/javascript">
    var xmlhttp;
    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            $("body").html(xmlhttp.responseText);
        }
    };

    xmlhttp.open("GET","../stats.phtml",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send();
</script>
</html>

它没有在加载的文档stats.phtml(javascript和css源)中找到任何外部文档,因为相对路径的路径是文档所在的路径,而不是加载文档的根路径。

我需要在AJAX上执行此操作(加载页面应该在加载内容时执行脚本并在3秒后显示它),所以只需要执行window.location ='.. / stats。 phtml'3秒后不是一个好的解决方案。我还想在加载的文档中保留相对链接,而不是将它们移动到绝对链接。有什么建议吗?

1 个答案:

答案 0 :(得分:2)

我发现阅读this article on mozilla developer可以在进行替换之前使用html5 window.history.pushState,如下所示:

if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
    var stateObj = { foo: "stats" };
    window.history.pushState(stateObj, "Title", "../stats.phtml");
    $("body").html(xmlhttp.responseText);
}

对我来说这很公平。

否则,我读#标记可用于识别文档并为另一个切换一个URL而不重新加载(结合一些Apache modrewrite法术将#符号更改为服务器中的实际目录,我猜)。如果你确切知道如何使用这种方法的任何例子都会受到赞赏。

更新我已经在这方面工作了一段时间,我发现了一个非jquery替代品,它取代了整个文档内容,在这种情况下更适合我。

if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        var stateObj = { foo: "stats" };
        window.history.pushState(stateObj, "Title", "../stats.phtml");
        document.open('text/html');
        document.write(xmlhttp.responseText);
        document.close(); // don't forget to do this, or you'll be in trouble!
    }

享受!