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，但由于.load()正在寻找/website.jpg，因此会抛出404。

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

Answer 1

这不是jQuery。 load正在加载资源。但是，那就是 HTML 放在当前文档中，因此该HTML中的所有链接都是相对于当前文档解析的，不是相对于当前文档您加载的网址。

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

~~我没有尝试过，但是~~你可以使用base element，在执行load之前动态添加它（使用从{派生的相应基础URL） {1}}您正在加载）然后在加载完成后将其删除。

修改：是的，使用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。看起来你正在成为The Horror of Implicit Globals的牺牲品。

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

1 个答案: