jquery - 为什么 jQuery.load 不处理相对链接？

Question

我使用一些基本的 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 ，但会抛出 404，因为 .load()正在寻找/website.jpg .

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

Answer 1

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

您要么必须创建这些根相对路径，要么使用 get 获取 HTML 并自行对其进行预处理。

我还没有尝试过，但是你可能会玩 base element ，在执行加载之前动态添加它(使用从您正在加载的href派生的适当基本URL)，然后在加载完成时将其删除。

编辑:是的，使用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;
});

请注意，我在 href 变量之前添加了一个 var。看起来您正在成为 The Horror of Implicit Globals 的牺牲品.