我试图弄清楚如何解析动态加载内容中相对引用的资源。例如，假设我从 /index.html 下载了以下页面:
<html><body>
<div id="insert-here" />
<script>
$(function(){
$("#insert-here").load("x/ajax-content.html");
});
</script>
</body></html>
并且ajax-content.html包含:
<img href="foo.png"/>
然后foo.png将从/foo.png下载，这不是我想要的。我需要相对于引用它的 HTML 来下载 foo.png，因此我需要从 /x/foo.png 下载它。我想知道是否有办法做到这一点(除了在 ajax-content.html 中使用绝对路径)？
(为什么我要这样做？我正在开发一个基于 AJAX 的插件架构，允许独立于应用程序开发和部署页面内容 block 。)
最佳答案
问题在于您将任意 HTML 插入到原始文档中。浏览器无法知道相关数据实际上来自另一个文档。以下是正在发生的事情的详细信息:
DOM(之前):
<html><body>
<div id="insert-here"></div>
</body></html>
DOM(之后):
<html><body>
<div id="insert-here"><img src="foo.png"></div>
</body></html>
由于插入数据的方式，所讨论的 html 片段来自其他一些 html 引用，这一事实已丢失。我想说最简单的解决方案是更改 ajax-content.html 文件中的路径。您可以在文件本身中执行此操作(也许自动通过上传 ajax 插件的任何工具)，或者在加载文档后修改路径。所以不要这样做
$("#insert-here").load("x/ajax-content.html");
您必须获取数据，然后调整所有路径，然后将数据插入到 DOM 中。
function updatePaths(responseText, textStatus, XMLHttpRequest) {
// check xmlHttpRequest status code
// parse responseText, fix up relative URLs
}
$("#insert-here").load("x/ajax-content.html", null, updatePaths);
关于jquery - 解析 AJAX 内容中的相关资源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1106101/