当单击页面上的链接时,我使用 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 也被修改了。但是,它与上面的代码不同。
我该如何以优雅而简单的方式解决此问题?
最佳答案
您想要的是插入 base tag在生成的 html 中,指定所有相对路径的根目录应位于的位置。
因此,假设您的所有相对路径都应从 /assets
提供然后你加载/user/1/profile
,相对图像:<img src="nyan.gif" />
将在 /user/1/profile/nyan.gif
进行检查并将被返回无效。但是,如果您插入 <base href="/assets">
在 head 标签中,图像将被正确提供
关于javascript - 使用ajax加载html和相对路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33487945/