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

目前尚不清楚您所使用的网址是什么，这最终会影响网页的反应方式。

例如，如果您所在的网页看起来像www.example.com/products，并且您尝试加载最终将成为www.example.com/smiley.gif的smiley.gif。

如果您使用的是www.example.com/products/（注意：尾部斜线）或www.example.com/products/index.html，则smiley.gif会指向www.example.com/products/smiley.gif。您不知道用户要输入的URL，但您可以：

更新您的链接以包含最终的斜杠以缓解此问题，并
如果用户输入错误，则将用户转发到带有斜杠的位置。

您网址末尾的一个斜杠可能就是修复此问题所需的全部内容，但是......您可能需要考虑将所有资产文件放入一个目录中，这样您就不必玩这个游戏了所有！在这种情况下，/images/smiley.gif可能会让您更容易。

Answer 2

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

因此，我们假设您应该从/assets投放所有相对路径，然后加载/user/1/profile，我会在<img src="nyan.gif" />检查与/user/1/profile/nyan.gif相关的相对图片，并且被退回无效。但是，如果您在头标记中插入<base href="/assets">，则图像将正确显示

使用ajax和相对路径加载html

2 个答案: