Question

我正在试图弄清楚如何在动态加载的内容中解析相对引用的资源。例如，假设我从/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的插件架构，允许独立于应用程序开发和部署页面内容块。）

Answer 1

问题是您将任意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);

解析AJAX内容中的相关资源

1 个答案: