javascript - 使用ajax加载html和相对路径

Question

当单击页面上的链接时，我使用 ajax 加载 html 文件。以下是所发生情况的简化版本:

links.click(function () {
    var href = $(this).attr("href");
    history.pushState(null, null, href);
    $.get($(this).attr("href"), function(data){
        $("#page").html(data)
    })
});

这很好用。然而，加载的.html文件包含大量具有相对路径的图像，如下:

<img src="smiley.gif">

因此，当加载文件时，页面文本没问题，但相关内容都没有正确加载。使用绝对路径创建图像可以解决我的问题，但是我需要它们与我当前的情况相关。

正如您所注意到的，我通过在点击事件函数中使用 history.pushstate 修改了地址栏。我假设加载的 url 会正确加载所有资源，因为 url 也被修改了。但是，它与上面的代码不同。

我该如何以优雅而简单的方式解决此问题？

Answer 1

您想要的是插入 base tag在生成的 html 中，指定所有相对路径的根目录应位于的位置。

因此，假设您的所有相对路径都应从 /assets 提供然后你加载/user/1/profile ，相对图像:<img src="nyan.gif" />将在 /user/1/profile/nyan.gif 进行检查并将被返回无效。但是，如果您插入 <base href="/assets">在 head 标签中，图像将被正确提供