2

我正在使用一些基本的 jQuery 通过 AJAX 替换内容来加速我的网站，而不是完全重新加载页面（类似于Turbolinks所做的）：

$("nav").delegate("a", "click", function() {
    href = $(this).attr('href');
    history.pushState(null, null, href);
    $('#main').load(href + " #main");
    return false;
});

不过，我遇到的问题是我/portfolio页面上的相对链接失败了。例如，我有<img src="website.jpg">它位于/portfolio/website.jpg，但由于.load()正在寻找/website.jpg.

我知道使图像路径成为绝对路径会起作用，但是有没有办法用 JavaScript 解决这个问题？为什么 jQuery 不处理这个？相对链接是不好的做法吗？

4

1 回答 1

10

这不是 jQuery。load正在加载资源。但是，问题是，该HTML被放入您当前的文档中，因此该 HTML 中的所有链接都相对于当前文档进行解析，而不是相对于您加载的 URL。

您要么必须创建那些相对于根的路径，要么用于get获取 HTML 并自己进行预处理。

我还没有尝试过，但是您可以使用baseelement，在执行之前动态添加它load（使用从您正在加载的相应的基本 URL 派生href），然后在加载完成时将其删除。

编辑：是的，使用base作品：

$("nav").delegate("a", "click", function() {
    // *** Added var to next line
    var href = $(this).attr('href');
    // *** Added base
    var base = $('<base href="' + href + '">');
    // *** Put base in head
    $("head").append(base);
    history.pushState(null, null, href);
    $('#main').contents().hide();
    $('#main').load(href + " #main", function() {
        // *** Remove base; I *think* at this point it's already
        // been used (worked in my test, anyway)
        base.remove();
    });
    return false;
});

请注意，我var在您的href变量之前添加了一个。看起来你正在成为隐式全球恐怖的牺牲品。

于 2013-07-26T17:18:32.050 回答