清理URL弄乱相关链接

时间:2014-01-08 00:42:45

标签: javascript .htaccess clean-urls

我已经设置了干净的网址,对于大多数人而言,他们的工作非常棒。然而,使用假的干净URL根目录,css,图像等的一些相对路径变得混乱。

首先,这是我的.htaccess文件:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteBase /
# Rewrite for page and number
RewriteRule ^([a-zA-Z0-9\-]+)/([0-9\-]+)$ index.php?page=$1&n=$2 [L]
RewriteRule ^([a-zA-Z0-9\-]+)/([0-9\-]+)/$ index.php?page=$1&n=$2 [L]
# Rewrite for page only
RewriteRule ^([a-zA-Z0-9\-]+)$ index.php?page=$1 [L]
RewriteRule ^([a-zA-Z0-9\-]+)/$ index.php?page=$1 [L]

适合我想要的东西,据我所知,这就是我想要的。

我也有一些通过AJAX技术动态加载/重新加载页面内容。基本上,给定页面名称(赋予index.php的var页面),它返回HTML或PHP文件的URL以填充/替换包含主要内容的某个div。但是这个东西马上就行不通了。

function loadContent(page, number) {
    // this stuff puts a temporary loading image
    $("#StageContent").html(
        "<div id='loading' style='width:100%; text-align:center;'>" 
        + "<img src='images/ajax-loader.gif' style='margin-top:50px;' />"
        + "</div>"
    );
    // jQuery call to php to retrieve url for given page name
    $.getJSON("includes/pages.php", {page:page, n:number}, function(json) {
        $("#StageContent").load(json.page_url);
        document.title = json.page_title;
        current_page = json.page_name;
        page_number = json.page_number;
        console.log("page loaded: " + current_page);
    });
}

问题是动态创建的URL(图像源和json.page_url)现在已经向它们添加了假的干净URL路径。例如。当加载主页(www.mysite.com/home/)时,它会为这两个添加“home /”,以便例如对于图像,它会尝试查找“www.mysite.com/home/images/ ajax-loader.gif“而不是”www.mysite.com/images/ajax-loader.gif“导致链接错误。但是它只针对那两个,而不是页面中的其他图像或脚本或CSS链接,所以其余的加载正常。 [afterthough:这是因为我首先为基本网址加载了它然后尝试加载页面,当只尝试干净网址时,它会创建与下面相同的问题]

另一个奇怪的事情是,当使用多部分清洁URL时(例如,让我们说“www.mysite.com/papers/2/”,我想从论文内容中找到第2页,现在除了上面的问题,它发生在网页中的每个相关链接,但只发生一个级别。所以整个页面没有正确加载,因为对CSS样式表的调用现在在相关链接中添加了“papers /”,并且每个都相同带有相对链接的图像等。

这在我猜测的htaccess中可能很简单,但我错过了什么?我想到了RewriteCond系列。或者我是否必须为所有内容强制使用非相对路径?

1 个答案:

答案 0 :(得分:4)

您需要将这些网址更改为绝对网址,例如:

    "<div id='loading' style='width:100%; text-align:center;'>" 
    + "<img src='/images/ajax-loader.gif' style='margin-top:50px;' />"
    + "</div>"

$.getJSON("/includes/pages.php", {page:page, n:number}, function(json) {

或者将此标记添加到您网页的标题中:

<base href="/" />

之所以发生这种情况,是因为浏览器对mod_rewrite路由没有任何了解,所以就它而言,它正在加载位于www.mysite.com/papers/2/的页面。这意味着任何相对网址的网址都为/papers/2/,(在加载/的情况下,而不是/index.php)。因此,浏览器看到的每个相对URL都会自动将它认为是相对URL基础的内容附加到它的开头。