Javascript 使用ajax加载html和相关路径

单击页面上的链接时，我使用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也会被修改。但是，上面的代码不是这样工作的

---

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

您需要在生成的html中插入一个，以指定所有相对路径的根所在的位置

---

因此，假设您的所有相对路径都应该从

/assets

提供服务，并且您加载

/user/1/profile

，将在

/user/1/profile/nyan.gif

处检查带有

的相对图像，并将其返回无效。但是，如果您在head标签中插入

，图像将被正确送达

不清楚您所在的URL，这最终将影响页面的反应

例如，如果您在一个看起来像

www.example.com/products

的页面上，并且您尝试加载smiley.gif，那么最终将是

www.example.com/smiley.gif

但是，如果您在

www.example.com/products/

（注意：尾随斜杠）或

www.example.com/products/index.html

，smiley.gif将指向

www.example.com/products/smiley.gif

。您不知道用户将要键入的URL，但您可以：

更新链接以包含最终斜杠以缓解此问题，以及

如果用户输入错误，则将用户转发到带有尾随斜杠的位置

---

你可能只需要在URL的末尾加一个斜杠就可以解决这个问题，但是。。。你可能想考虑把你所有的资产文件放在一个目录里，这样你就不用玩这个游戏了！code>/images/smiley.gif在这种情况下对您来说可能会更简单。

它应该可以工作，这里有一支笔显示了它的作用：哇，非常好！我从没想过domain.com/folder和domain.com/folder/是不同的东西！